@extends('layout.master')
@section('leaders')
    active
@endsection
@section('content')
    <style>
        select {
            width: 390px;
        }
        .popupclose {
            position: absolute;
            right: 10px;
            opacity: 1;
            top: 10px;
            z-index: 1060;
            font-weight: 600;
            font-size: 20px;
        }
    </style>
    <!--breadcrumbs-->
    <div id="content-header">
        <div id="breadcrumb">
            <a href="{{ url('dashboard') }}" title="Go to Home" class="tip-bottom"><i class="icon-home"></i> Home</a>
            <a href="{{ url()->current() }}" class="current">Top 200/100 Franchises</a>
        </div>
        <h1>Top 200/100 Franchises</h1>
    </div>
    <!--End-breadcrumbs-->
    <div class="container-fluid">
        <div class="row-fluid">
            <div class="span12">
                {{-- @include('include.tabs') --}}
                <form id="datesearchform" style="float: right;" name="datesearchform" action="{{ url()->current() }}"
                    method="get">
                    <select name="type" id="type">
                        <option value="">Select Registration Type</option>
                        <option value="1" {{ !empty(request()->type) && request()->type == 1 ? 'selected' : '' }}>FIHL
                        </option>
                        <option value="2" {{ !empty(request()->type) && request()->type == 2 ? 'selected' : '' }}>FIBL
                        </option>
                    </select>
                    <select name="membership_plan" id="membership_type">
                        <option value="">Membership Plan</option>
                        @foreach (Config('constants.membershipPlanFranchisorDetail') as $key => $value)
                            <option value="{{ $key }}"
                                {{ !empty(request()->membership_plan) && request()->membership_plan == $key ? 'selected' : '' }}>
                                {{ $value }}
                            </option>
                        @endforeach
                    </select>
                    <input type="text" name="search" id="searchBox"
                        placeholder="Email / Franchisor-Id / Detail-Id / Phone" value="{{ request()->search }}">
                    <label for="startDate">Search By: Registration Start date</label>
                    <input type="date" name="startDate" placeholder="From Date" value="{{ request()->startDate }}">
                    == to ==
                    <input type="date" name="endDate" placeholder="To Date" value="{{ request()->endDate }}">
                    <input type="submit" id="formsubmitbtn" value="Search" style="margin-bottom: 10px;">
                    <input type="button" id="resetbtn" value="Reset"
                        style="margin-bottom: 10px; width:100px;height:30px;">
                </form>
                <div class="widget-box">
                    <div class="widget-title">
                        <span class="icon"><i class="icon-th"></i></span>
                        <h5>franchisor Data</h5>
                    </div>
                    <div class="widget-content nopadding">
                        @if (count($data) > 0)
                            <table class="table table-bordered table-striped">
                                <thead>
                                    <tr>
                                        <th>Id</th>
                                        <th>Profile Email</th>
                                        <th>Company Name</th>
                                        {{-- <th>Created Date</th> --}}
                                        <th>Franchisor Type (Top 100/200)</th>
                                        <th>Franchisor Year</th>
                                        <th>Add Franchisor List</th>
                                        <th>Remove Franchisor List</th>
                                    </tr>
                                </thead>
                                <tbody id="tablecontent">
                                    @foreach ($data as $franData)
                                        @php
                                        $companyName = $franData->franchisor->company_name ?? '';
                                        $companyName = htmlspecialchars($companyName, ENT_QUOTES, 'UTF-8');
                                        @endphp
                                        <tr class="gradeX">
                                            <td>{{ $franData->profile_str }}</td>
                                            <td>{{ $franData->email }}</td>
                                            <td>{{ $companyName }}</td>
                                            {{-- <td>{{ date('d-M-Y', strtotime($franData->created_at)) }}</td> --}}
                                            <td>
                                                @foreach ($franData->topFranchiseBrands as $leader)
                                                    @if ($leader->franchisor_type == 'top-100')
                                                        <span>Top 100</span>
                                                    @else
                                                        <span>Top 200</span>
                                                    @endif
                                                    <br>
                                                @endforeach
                                            </td>
                                            <td>
                                                @foreach ($franData->topFranchiseBrands as $leader)
                                                    {{ $leader->franchisor_year }}<br>
                                                @endforeach
                                            </td>
                                            <td>
                                                <button class="btn btn-success" type="button"
                                                    onclick="openPopup('{{ htmlspecialchars($companyName, ENT_QUOTES, 'UTF-8') }}','{{ $franData->profile_str }}')">Add</button>
                                            </td>
                                            <td>
                                                <button class="btn btn-info"
                                                    onclick='openRemovePopup(
                                                        @json($companyName), 
                                                        @json($franData->profile_str), 
                                                        @json($franData->topFranchiseBrands ?? [])
                                                    )'>Remove</button>
                                            </td>

                                        </tr>
                                    @endforeach
                                </tbody>
                            </table>
                    </div>
                    <div class="custpagin">
                        {{ $data->appends(['startDate' => request()->startDate, 'endDate' => request()->endDate, 'search' => request()->search])->links('pagination::bootstrap-4') }}
                    </div>
                    @endif
                </div>
            </div>
        </div>
    </div>
    <!-- Bootstrap Modal -->
    <div class="modal fade" id="openfranchisorModal" tabindex="-1" aria-labelledby="modalTitle" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="modalTitle">Add Top Franchises</h5>
                    <button type="button" class="popupclose" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <form id="franchisorForm">
                        @csrf
                        <input type="hidden" id="franchisor_id" name="franchisor_id">

                        <div class="form-group">
                            <label for="franchisor_type">Franchise Type</label>
                            <select name="franchisor_type" id="franchisor_type" class="form-control" required>
                                <option value="">Select Franchise Type</option>
                                <option value="top-100">Top 100</option>
                                <option value="top-200">Top 200</option>
                                {{-- <option value="both">Both (Top 100/200)</option> --}}
                            </select>
                        </div>
                        <div class="form-group">
                            <label for="franchisor_year">Franchise Year</label>
                            <select name="franchisor_year" id="franchisor_year" class="form-control" required>
                                <option value="">Select Franchise Year</option>
                                <option value="2025">2025</option>
                                <option value="2024">2024</option>
                                <option value="2023">2023</option>
                                <option value="2022">2022</option>
                                <option value="2021">2021</option>
                                <option value="2020">2020</option>
                                <option value="2019">2019</option>
                            </select>
                        </div>
                        <button type="button" class="btn btn-primary" onclick="submitFranchisorForm()">Submit</button>
                    </form>
                </div>
            </div>
        </div>
    </div>
    <!-- Remove Franchisor Leader Modal -->
    <div id="closeFranchisorModal" class="modal fade" tabindex="-1" role="dialog">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Remove From Top Franchises</h5>
                    <button type="button" class="popupclose" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <p>Are you sure you want to remove <b id="modalCompanyName"></b>?</p>

                    <form id="removeFranchisorForm">
                        @csrf
                        <input type="hidden" name="franchisor_id" id="modalFranchisorId">

                        <div class="form-group">
                            <label for="recordSelect">Select Franchise Year</label>
                            <select class="form-control" id="recordSelect">
                                <option value="">Loading...</option>
                            </select>
                        </div>

                        <button type="button" class="btn btn-danger" onclick="removeFranchisor()">Remove</button>
                    </form>
                </div>
            </div>
        </div>
    </div>

    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        document.getElementById("resetbtn").addEventListener("click", function() {
            window.location.href = "/top-franchise";
        });

        function openPopup(companyName, franchisorId) {
            $('#modalTitle').text('Add Top Franchise - ' + companyName); // Set company name in modal title
            $('#franchisor_id').val(franchisorId); // Set hidden field value
            $('#openfranchisorModal').modal('show'); // Show the modal
        }

        function submitFranchisorForm() {
            let franchisorId = $('#franchisor_id').val();
            let franchisorType = $('#franchisor_type').val();
            let franchisorYear = $('#franchisor_year').val();

            if (!franchisorType) {
                alert("Please select a Franchise Type.");
                return;
            }
            if (!franchisorYear) {
                alert("Please select a Franchise Year.");
                return;
            }

            $.ajax({
                type: "POST",
                url: "/update-top-franchise",
                data: {
                    franchisor_id: franchisorId,
                    franchisor_type: franchisorType,
                    franchisorYear: franchisorYear,
                    _token: "{{ csrf_token() }}"
                },
                success: function(response) {
                    alert(response.message);
                    $('#franchisorModal').modal('hide'); // Close the modal
                    location.reload(); // Refresh the page to reflect changes
                },
                error: function(error) {
                    console.log(error);
                    alert("Something went wrong!");
                }
            });
        }


        function openRemovePopup(companyName, franchisorId, leaders) {
            if (leaders.length < 1) {
                alert('No records found.');
                return false;
            }
            document.getElementById('modalCompanyName').innerText = companyName;
            document.getElementById('modalFranchisorId').value = franchisorId;

            let selectElement = document.getElementById('recordSelect');
            selectElement.innerHTML = ""; // Clear previous options

            if (leaders.length > 0) {
                leaders.forEach(leader => {
                    let option = document.createElement('option');
                    option.value = leader.id;
                    option.text = `Type: ${leader.franchisor_type}, Year: ${leader.franchisor_year}`;
                    selectElement.appendChild(option);
                });
            } else {
                let option = document.createElement('option');
                option.text = 'No records found';
                selectElement.appendChild(option);
            }

            $('#closeFranchisorModal').modal('show'); // Open the modal
        }

        function removeFranchisor() {
            let franchisorId = document.getElementById('modalFranchisorId').value;
            let recordId = document.getElementById('recordSelect').value;

            if (!recordId) {
                alert("Please Select A Franchise Record To Remove.");
                return;
            }

            if (!confirm("Are You Sure You Want To Remove This Top Franchise?")) {
                return;
            }

            $.ajax({
                url: "{{ route('removeFranchisorLeader') }}", // Update this with your actual route
                type: "POST",
                data: {
                    _token: "{{ csrf_token() }}",
                    franchisor_id: franchisorId,
                    record_id: recordId
                },
                success: function(response) {
                    alert(response.message);
                    location.reload(); // Refresh the page to reflect changes
                },
                error: function(xhr) {
                    alert("An error occurred: " + xhr.responseText);
                }
            });
        }
    </script>
@endsection