@extends('layout.master')
@section('RSS', 'active open')
@section('RFD', 'active')
@if ($active == 'all')
    @section('RFD', 'active')
@elseif ($active == 'lft')
    @section('LFT', 'active')
@elseif ($active == 'tbo')
    @section('TBO', 'active')
@elseif ($active == 'tfo')
    @section('TFO', 'active')
@elseif ($active == 'tdo')
    @section('TDO', 'active')
@endif
@section('content')
    <!--breadcrumbs-->
    <div id="content-header">
        <div id="breadcrumb"> <a href="dashboard" title="Go to Home" class="tip-bottom"><i class="icon-home"></i>
                Home</a> <a href="#">Franchisor Regional Dashboard</a>
        </div>
        <!--End-breadcrumbs-->
        <div class="container-fluid">
            <div class="row-fluid">
                <div class="span12">
                @section($active, 'active')
                <ul class="nav nav-tabs">
                    <li class="@yield('all')"><a href="{{ url('regional-franchisor-dashboard') }}">All</a></li>
                    <li class="@yield('lft')"><a href="{{ url('regional-lft') }}">Regional LFT</a></li>
                    <li class="@yield('tbo')"><a href="{{ url('regional-tbo') }}">Regional TBO</a></li>
                    <li class="@yield('tfo')"><a href="{{ url('regional-tfo') }}">Regional TFO</a></li>
                    <li class="@yield('tdo')"><a href="{{ url('regional-tdo') }}">Regional TDO</a></li>
                    <a href="{{ url('add-regional-brand') }}" class="btn btn-primary pull-right"
                        style="border-radius: 4px">Add New Brand</a>
                </ul>
                <div class="control-group">
                    @if (session()->has('ErrorImage'))
                        <div class="alert alert-danger">{{ session()->get('ErrorImage') }}</div>
                    @elseif(session()->has('success'))
                        <div class="alert alert-success">{{ session()->get('success') }}</div>
                    @endif
                </div>
                <div class="widget-box">
                    <div class="widget-title"> <span class="icon"><i class="icon-th"></i></span>
                        <h5>Franchisor Regional Data</h5>
                        <div style="float: right;">
                            <label>Search by Franchisor ID or State:
                                <input type="text" id="brandsearch" placeholder="Enter Franchisor Id"
                                    style="width: 250px; height: 32px; margin-top: 8px;">
                                &nbsp;
                                {{-- </label> --}}
                                {{-- <label>Search by State: --}}
                                <select id="statesearch" style="width: 250px; height: 32px; margin-top: 8px;">
                                    <option value="">Select State</option>
                                    @foreach (config('constants.stateArr') as $stateId => $stateName)
                                        <option value="{{ $stateId }}">{{ $stateName }}</option>
                                    @endforeach
                                </select>
                                &nbsp;
                            </label>

                        </div>
                    </div>
                    <div class="widget-content nopadding">
                        <table class="table table-bordered table-striped">
                            <thead>
                                <tr>
                                    <th rowspan="2">S.No.</th>
                                    <th rowspan="2">Franchisor-ID</th>
                                    <th rowspan="2">Type</th>
                                    <th rowspan="2">Image</th>
                                    <th colspan="2">Tenure</th>
                                    <th rowspan="2">Section</th>
                                    <th rowspan="2">State</th>
                                    <th rowspan="2">Status</th>
                                    <th colspan="3">Actions</th> <!-- Now spans 2 columns -->
                                </tr>
                                <tr>
                                    <th>Start Date</th>
                                    <th>End Date</th>
                                    <th>Edit</th>
                                    <th>Delete</th>
                                    <th>Upgrade</th>
                                </tr>

                            </thead>
                            <tbody id="tablecontent">
                                @php
                                    $i = 0;
                                    $sectionNames = [1 => 'LFT', 2 => 'TBO', 3 => 'TFO', 4 => 'TDO'];
                                @endphp

                                @foreach ($groupedData as $stateId => $items)
                                    {{-- State Header Row --}}
                                    <tr>
                                        <td colspan="12" style="background: #f1f1f1; font-weight: bold;">
                                            State: {{ config('constants.stateArr')[$stateId] ?? 'Unknown' }}
                                        </td>
                                    </tr>

                                    @foreach ($items as $imageData)
                                        @php
                                            $i++;
                                            $process = $imageData->status == 1 ? 'hide' : 'unhide';
                                            $btn = $imageData->status == 1 ? 'success' : 'danger';

                                            // Payment lookup key
                                            $key = $imageData->fihl_id . '-' . $imageData->state_id;

                                            // Default values
                                            $startDate = 'Not Found';
                                            $endDate = 'Not Found';
                                            $type = 'FIHL';
                                            $alert = 'black';

                                            // Lookup payment info efficiently
                                            if (isset($paymentMap[$key])) {
                                                $payment = $paymentMap[$key];
                                                $startDate = $payment->start_date;
                                                $endDate = $payment->end_date;
                                                $type = $payment->amount == 0 ? 'FIBL' : 'FIHL';
                                                $alert = strtotime($endDate) < strtotime(now()) ? 'red' : 'black';
                                            }

                                            // Build upgrade URL params
                                            $urlData = [
                                                'fihl_id' => $imageData->fihl_id,
                                                'state_id' => $imageData->state_id,
                                                'type' => 'franchise',
                                            ];
                                            $encodedParams = base64_encode(json_encode($urlData));
                                        @endphp

                                        {{-- Data Row --}}
                                        <tr class="gradeX">
                                            <td style="font-size: 14px;">{{ $i }}</td>
                                            <td style="font-size: 14px;">{{ $imageData->fihl_id }}</td>
                                            <td style="font-size: 14px;">{{ $type }}</td>
                                            <td>
                                                <center>
                                                    <img src="{{ $imageData->brand_img }}" style="max-height: 100px;">
                                                </center>
                                            </td>
                                            <td style="color: {{ $alert }}; font-size: 14px;">
                                                {{ $startDate }}</td>
                                            <td style="color: {{ $alert }}; font-size: 14px;">
                                                {{ $endDate }}</td>
                                            <td style="font-size: 14px;">
                                                {{ $sectionNames[$imageData->brand_section] ?? $imageData->brand_section }}
                                            </td>
                                            <td style="font-size: 14px;">
                                                {{ config('constants.stateArr')[$imageData->state_id] ?? 'Not Found' }}
                                            </td>
                                            <td>
                                                <center>
                                                    <a
                                                        href="{{ config('constants.MainDomain') }}/regional-{{ $process }}/{{ $imageData->brand_id }}">
                                                        <button class="btn btn-medium btn-{{ $btn }}"
                                                            style="border-radius: 4px;">
                                                            {{ ucfirst($process) }}
                                                        </button>
                                                    </a>
                                                </center>
                                            </td>
                                            <td>
                                                <center>
                                                    <a
                                                        href="{{ config('constants.MainDomain') }}/regional-edit/{{ $imageData->brand_id }}">
                                                        <button class="btn btn-medium btn-warning"
                                                            style="border-radius: 4px;">
                                                            Edit
                                                        </button>
                                                    </a>
                                                </center>
                                            </td>
                                            <td>
                                                <center>
                                                    <a
                                                        href="{{ config('constants.MainDomain') }}/regional-delete/{{ $imageData->brand_id }}">
                                                        <button class="btn btn-medium btn-danger"
                                                            style="border-radius: 4px;">
                                                            Delete
                                                        </button>
                                                    </a>
                                                </center>
                                            </td>
                                            <td class="text-center">
                                                <a href="{{ config('constants.MainDomain') }}/upgrade-regional-membership/{{ $encodedParams }}"
                                                    class="btn btn-primary btn-medium" style="border-radius: 4px;">
                                                    Upgrade
                                                </a>
                                            </td>
                                        </tr>
                                    @endforeach
                                @endforeach

                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
        <div class="custpagin">{{ $data->links('pagination::bootstrap-4') }}</div>
    </div>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        function debounce(func, delay) {
            let timer;
            return function() {
                clearTimeout(timer);
                timer = setTimeout(() => func.apply(this, arguments), delay);
            };
        }

        function fetchData(url, params) {
            $.get(url, params)
                .done(function(data) {
                    $('#tablecontent').html(data);
                    $('.custpagin').hide();
                })
                .fail(function() {
                    console.error('Error fetching data');
                });
        }

        $('#brandsearch').on('input', debounce(function() {
            const value = $(this).val().trim();
            let section = "{{ $section }}";
            let active = "{{ $active }}";
            if (active == 'all') {
                section = null;
            }
            if (value.length > 5) {
                fetchData('{{ URL::to('regionalsearch') }}', {
                    search: value,
                    section: section,
                    pageType: "{{ $pType }}",
                });
            }
        }, 300));

        $('#statesearch').on('change', debounce(function() {
            const stateId = $(this).val().trim();
            let section = "{{ $section }}";
            let active = "{{ $active }}";
            if (active == 'all') {
                section = null;
            }
            if (stateId) {
                fetchData('{{ URL::to('regionalsearch') }}', {
                    state: stateId,
                    section: section,
                    pageType: "{{ $pType }}",
                });
            }
        }, 300));
    </script>
@endsection