@extends('layouts.master')

@section('title')
    Partners List
@endsection

@section('content')
    <div class="row">
        <div class="col-lg-12">
            <div class="card">
                <div class="card-body">
                    <div class="row mb-2">
                        <div class="col-md-6">
                            <div class="form-inline float-md-start mb-3">
                                <!-- Add any filters or search inputs here -->
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="mb-3 float-end">
                                @if (Auth::user()->role == 'Admin' || Auth::user()->role == 'Partner Rep')
                                    <a href="#" class="btn btn-primary" data-bs-toggle="modal"
                                        data-bs-target="#addUserModal">
                                        <i class="mdi mdi-plus me-1"></i> Add Partner
                                    </a>
                                @endif
                                <a href="#" class="btn btn-primary" data-bs-toggle="modal"
                                    data-bs-target="#requestUserModal">
                                    <i class="mdi mdi-plus me-1"></i> Request Partner
                                </a>
                            </div>
                        </div>
                    </div>
                    <!-- end row -->
                    <div class="table-responsive mb-4">
                        <table id="example2" class="table table-striped table-bordered dt-responsive"
                            style="border-collapse: collapse; border-spacing: 0; width: 100%;">
                            <thead class="bg-light">
                                <tr>
                                    <th scope="col">Manufacturer</th>
                                    <th scope="col">Synnex</th>
                                    <th scope="col">ClimbCS</th>
                                    <th scope="col">Ingram</th>
                                    <th scope="col">Carahsoft</th>
                                    <th scope="col">Vcloud Tech</th>
                                    <th scope="col">Arrow</th>
                                    <th scope="col">ASI</th>
                                    <th scope="col">DLT</th>
                                    <th scope="col">DNH</th>
                                    <th scope="col">Immix</th> <!-- Added Immix Column -->
                                    @if (Auth::user()->role == 'Admin' || Auth::user()->role == 'Partner Rep')
                                        <th scope="col" style="width: 200px;">Action</th>
                                    @endif
                                </tr>
                            </thead>
                            <tbody>
                                @foreach ($partners as $partner)
                                    <tr>
                                        <td>
                                            <a href="#">{{ $partner->manufacturer }}</a>
                                        </td>
                                        <td>
                                            @if ($partner->synnex)
                                                <a href="#" class="vendor-link" data-manufacturer="{{ $partner->manufacturer }}" data-vendor-type="synnex">✔️</a>
                                            @else
                                                ❌
                                            @endif
                                        </td>
                                        <td>
                                            @if ($partner->climbcs)
                                                <a href="#" class="vendor-link" data-manufacturer="{{ $partner->manufacturer }}" data-vendor-type="climbcs">✔️</a>
                                            @else
                                                ❌
                                            @endif
                                        </td>
                                        <td>
                                            @if ($partner->ingram)
                                                <a href="#" class="vendor-link" data-manufacturer="{{ $partner->manufacturer }}" data-vendor-type="ingram">✔️</a>
                                            @else
                                                ❌
                                            @endif
                                        </td>
                                        <td>
                                            @if ($partner->carahsoft)
                                                <a href="#" class="vendor-link" data-manufacturer="{{ $partner->manufacturer }}" data-vendor-type="carahsoft">✔️</a>
                                            @else
                                                ❌
                                            @endif
                                        </td>
                                        <td>
                                            @if ($partner->vcloudtech)
                                                <a href="#" class="vendor-link" data-manufacturer="{{ $partner->manufacturer }}" data-vendor-type="vcloudtech">✔️</a>
                                            @else
                                                ❌
                                            @endif
                                        </td>
                                        <td>
                                            @if ($partner->arrow)
                                                <a href="#" class="vendor-link" data-manufacturer="{{ $partner->manufacturer }}" data-vendor-type="arrow">✔️</a>
                                            @else
                                                ❌
                                            @endif
                                        </td>
                                        <td>
                                            @if ($partner->asi)
                                                <a href="#" class="vendor-link" data-manufacturer="{{ $partner->manufacturer }}" data-vendor-type="asi">✔️</a>
                                            @else
                                                ❌
                                            @endif
                                        </td>
                                        <td>
                                            @if ($partner->dlt)
                                                <a href="#" class="vendor-link" data-manufacturer="{{ $partner->manufacturer }}" data-vendor-type="dlt">✔️</a>
                                            @else
                                                ❌
                                            @endif
                                        </td>
                                        <td>
                                            @if ($partner->dnh)
                                                <a href="#" class="vendor-link" data-manufacturer="{{ $partner->manufacturer }}" data-vendor-type="dnh">✔️</a>
                                            @else
                                                ❌
                                            @endif
                                        </td>
                                        <td>
                                            @if ($partner->immix)
                                                <a href="#" class="vendor-link" data-manufacturer="{{ $partner->manufacturer }}" data-vendor-type="immix">✔️</a>
                                            @else
                                                ❌
                                            @endif
                                        </td>
                                        @if (Auth::user()->role == 'Admin' || Auth::user()->role == 'Partner Rep')
                                            <td>
                                                <ul class="list-inline mb-0">
                                                    <li class="list-inline-item">
                                                        <a href="{{ route('partner.edit', $partner->id) }}"
                                                            class="px-2 text-primary"><i
                                                                class="material-icons-outlined">edit</i></a>
                                                    </li>
                                                    <li class="list-inline-item">
                                                        <a href="{{ route('partner.delete', $partner->id) }}"
                                                            class="px-2 text-danger"><i
                                                                class="material-icons-outlined">close</i></a>
                                                    </li>
                                                </ul>
                                            </td>
                                        @endif
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                    <div class="row mt-4">
                        {{-- {{ $partners->links('pagination::bootstrap-5') }} --}}
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- end row -->

    <!-- Modal for Displaying Vendor Data -->
    <div class="modal fade" id="vendorModal" tabindex="-1" aria-labelledby="vendorModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="vendorModalLabel">Vendor Details</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <table class="table" id="vendor-details-table">
                        <!-- Dynamic content inserted here -->
                    </table>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>

    <!-- Add Partner Modal -->
    <div class="modal fade" id="addUserModal" tabindex="-1" aria-labelledby="addUserModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-lg modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="addUserModalLabel">Add Partner</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <form action="{{ route('create.partner') }}" method="post" enctype="multipart/form-data">
                    @csrf
                    <div class="modal-body p-4">
                        <div>
                            <div class="mb-3">
                                <label for="addcontact-name-input" class="form-label">Manufacturer</label>
                                <input type="text" class="form-control" id="addcontact-name-input"
                                    placeholder="Manufacturer" name="manufacturer">
                            </div>
                            <div class="mb-3">
                                <label for="addcontact-synnex-input" class="form-label">Synnex</label>
                                <select class="form-select" id="addcontact-synnex-input" name="synnex">
                                    <option value="0">No</option>
                                    <option value="1">Yes</option>
                                </select>
                            </div>
                            <div class="mb-3">
                                <label for="addcontact-climbcs-input" class="form-label">ClimbCS</label>
                                <select class="form-select" id="addcontact-climbcs-input" name="climbcs">
                                    <option value="0">No</option>
                                    <option value="1">Yes</option>
                                </select>
                            </div>
                            <div class="mb-3">
                                <label for="addcontact-ingram-input" class="form-label">Ingram</label>
                                <select class="form-select" id="addcontact-ingram-input" name="ingram">
                                    <option value="0">No</option>
                                    <option value="1">Yes</option>
                                </select>
                            </div>
                            <div class="mb-3">
                                <label for="addcontact-carahsoft-input" class="form-label">Carahsoft</label>
                                <select class="form-select" id="addcontact-carahsoft-input" name="carahsoft">
                                    <option value="0">No</option>
                                    <option value="1">Yes</option>
                                </select>
                            </div>
                            <div class="mb-3">
                                <label for="addcontact-vcloudtech-input" class="form-label">Vcloud Tech</label>
                                <select class="form-select" id="addcontact-vcloudtech-input" name="vcloudtech">
                                    <option value="0">No</option>
                                    <option value="1">Yes</option>
                                </select>
                            </div>
                            <div class="mb-3">
                                <label for="addcontact-arrow-input" class="form-label">Arrow</label>
                                <select class="form-select" id="addcontact-arrow-input" name="arrow">
                                    <option value="0">No</option>
                                    <option value="1">Yes</option>
                                </select>
                            </div>
                            <div class="mb-3">
                                <label for="addcontact-asi-input" class="form-label">ASI</label>
                                <select class="form-select" id="addcontact-asi-input" name="asi">
                                    <option value="0">No</option>
                                    <option value="1">Yes</option>
                                </select>
                            </div>
                            <div class="mb-3">
                                <label for="addcontact-dlt-input" class="form-label">DLT</label>
                                <select class="form-select" id="addcontact-dlt-input" name="dlt">
                                    <option value="0">No</option>
                                    <option value="1">Yes</option>
                                </select>
                            </div>
                            <div class="mb-3">
                                <label for="addcontact-dnh-input" class="form-label">DNH</label>
                                <select class="form-select" id="addcontact-dnh-input" name="dnh">
                                    <option value="0">No</option>
                                    <option value="1">Yes</option>
                                </select>
                            </div>
                            <div class="mb-3">
                                <label for="addcontact-immix-input" class="form-label">Immix</label>
                                <select class="form-select" id="addcontact-immix-input" name="immix">
                                    <option value="0">No</option>
                                    <option value="1">Yes</option>
                                </select>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-light w-sm" data-bs-dismiss="modal">Close</button>
                        <button type="submit" class="btn btn-primary w-sm">Add</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <!-- Request Partner Modal -->
    <div class="modal fade" id="requestUserModal" tabindex="-1" aria-labelledby="requestUserModalLabel"
        aria-hidden="true">
        <div class="modal-dialog modal-lg modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="requestUserModalLabel">Request Partner</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <form action="{{ route('request.partner') }}" method="post" enctype="multipart/form-data">
                    @csrf
                    <div class="modal-body p-4">
                        <div>
                            <div class="mb-3">
                                <label for="vendorname" class="form-label">Vendor Name</label>
                                <input type="text" class="form-control" id="vendorname" placeholder="Vendor Name"
                                    name="vendorname">
                            </div>
                            <div class="mb-3">
                                <label for="websiteurl" class="form-label">Website URL</label>
                                <input type="text" class="form-control" placeholder="Website URL" name="websiteurl"
                                    id="websiteurl">
                            </div>
                            <div class="mb-3">
                                <label for="oppvertical" class="form-label">Opp Vertical</label>
                                <input id="oppvertical" type="text" class="form-control" placeholder="Opp Vertical"
                                    name="oppvertical">
                            </div>
                            <div class="mb-3">
                                <label for="euname" class="form-label">EU Name</label>
                                <input type="text" class="form-control" placeholder="EU Name" name="euname"
                                    id="euname">
                            </div>
                            <div class="mb-3">
                                <label for="euaddress" class="form-label">EU Address</label>
                                <input type="text" class="form-control" placeholder="EU Address" name="euaddress"
                                    id="euaddress">
                            </div>
                            <div class="mb-3">
                                <label for="closedate" class="form-label">Close Date</label>
                                <input type="date" class="form-control" placeholder="Close Date" name="closedate"
                                    id="closedate">
                            </div>
                            <div class="mb-3">
                                <label for="preferreddistributor" class="form-label">Preferred Distributor(s)</label>
                                <input type="text" class="form-control" placeholder="Preferred Distributor(s)"
                                    name="preferreddistributor" id="preferreddistributor">
                            </div>
                            <div class="mb-3">
                                <label for="reasontopartner" class="form-label">Reason to Partner</label>
                                <input type="text" class="form-control" placeholder="Reason to Partner"
                                    name="reasontopartner" id="reasontopartner">
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-light w-sm" data-bs-dismiss="modal">Close</button>
                        <button type="submit" class="btn btn-primary w-sm">Request</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <!-- Scripts -->
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        $(document).ready(function() {
            var table = $('#example2').DataTable({
                lengthChange: false,
                buttons: ['copy', 'excel', 'pdf', 'print']
            });

            table.buttons().container()
                .appendTo('#example2_wrapper .col-md-6:eq(0)');

            $(document).on('click', '.vendor-link', function(e) {
                e.preventDefault();
                let manufacturer = $(this).data('manufacturer');
                let vendorType = $(this).data('vendorType');

                $.ajax({
                    url: "{{ route('get.vendor.details') }}",
                    type: "GET",
                    data: {
                        manufacturer: manufacturer,
                        vendor_type: vendorType
                    },
                    success: function(data) {
                        let $table = $('#vendor-details-table');
                        $table.empty();

                        for (let column in data) {
                            let values = data[column];
                            if (values.length === 0) continue;

                            let $row = $('<tr>');
                            $row.append($('<th>').text(column.replace(/_/g, ' ').toUpperCase()));

                            let $td = $('<td>');
                            values.forEach(function(value, index) {
                                if (column.toLowerCase().includes('email')) {
                                    let $link = $('<a>').attr('href', 'mailto:' + value).text(value);
                                    $td.append($link);
                                } else {
                                    $td.append(document.createTextNode(value));
                                }
                                if (index < values.length - 1) $td.append(', ');
                            });
                            $row.append($td);
                            $table.append($row);
                        }

                        $('#vendorModal').modal('show');
                    },
                    error: function() {
                        alert("Error fetching vendor data.");
                    }
                });
            });
        });
    </script>
@endsection