@extends('layouts.app')
@section('title', 'Visit Plan Templates')

@push('css')
    <style>
        .select2-container--default .select2-selection--multiple .select2-selection__choice {
            background-color: #343a40 !important;
            border: 1px solid #23272b !important;
            color: #ffffff !important;
            border-radius: 4px !important;
            padding: 2px 8px !important;
            font-weight: 500 !important;
            margin-top: 4px !important;
        }

        .select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
            color: #adb5bd !important;
            margin-right: 5px !important;
            border: none !important;
            background: transparent !important;
        }

        .select2-container {
            width: 100% !important;
        }

        .outlet-badge {
            display: inline-block;
            background: #f0f2f5;
            padding: 2px 8px;
            border-radius: 4px;
            margin: 2px;
            font-size: 0.85rem;
            border: 1px solid #e1e4e8;
        }

        .frequency-tag {
            font-weight: bold;
            color: #007bff;
            margin-left: 4px;
        }
    </style>
@endpush

@section('content')

    <div class="fixed-action-bar d-flex align-items-center justify-content-between">
        <div class="fw-semibold fixed-nav-title">Visit Plan Templates</div>
        <div class="d-flex align-items-center">

            {{-- Extra Actions on Left --}}
            <a href="{{ route('horeca.visit-plans.index') }}">
                <i class="fa-solid fa-rotate-right fixed-nav-btn p-1 d-inline-flex align-items-center justify-content-center mx-1"
                    data-toggle="tooltip" title="Refresh"></i>
            </a>

            {{-- Standardized 6 Icons --}}

            <i class="fa-regular fa-plus fixed-nav-btn p-1 d-inline-flex align-items-center justify-content-center mx-1"
                data-toggle="tooltip" title="Add"></i>
            <i class="fa-regular fa-save fixed-nav-btn p-1 d-inline-flex align-items-center justify-content-center mx-1"
                data-toggle="tooltip" title="Save"></i>
            <i class="fa-regular fa-edit fixed-nav-btn p-1 d-inline-flex align-items-center justify-content-center mx-1"
                data-toggle="tooltip" title="Edit"></i>
            <i class="fa-regular fa-trash-can fixed-nav-btn p-1 d-inline-flex align-items-center justify-content-center mx-1"
                data-toggle="tooltip" title="Delete"></i>

            <i class="fa-solid fa-xmark fixed-nav-btn p-1 d-inline-flex align-items-center justify-content-center ms-1"
                data-toggle="tooltip" title="Close"></i>

            <i class="fa-solid fa-columns fixed-nav-btn p-1 d-inline-flex align-items-center justify-content-center mx-1"
                data-toggle="tooltip" title="Columns"></i>
        </div>
    </div>

    <div class="card mt-3 rounded-border">
        <div class="card-body">
            <div class="row mb-4 bg-light p-3 rounded">
                <div class="col-md-3">
                    <label class="form-label fw-bold">LSR</label>
                    <select id="quick_lsr_id" class="form-control select2">
                        <option value="">Select LSR</option>
                        @foreach($lsrUsers as $user)
                            <option value="{{ $user->id }}">{{ $user->name }}</option>
                        @endforeach
                    </select>
                </div>
                <div class="col-md-3">
                    <label class="form-label fw-bold">Route</label>
                    <select id="quick_route_id" class="form-control select2">
                        <option value="">Select Route</option>
                        @foreach($routes as $route)
                            <option value="{{ $route->id }}">{{ $route->name }}</option>
                        @endforeach
                    </select>
                </div>
                <div class="col-md-3">
                    <label class="form-label fw-bold">Day</label>
                    <select id="quick_day" class="form-control select2">
                        <option value="">Select Day</option>
                        @foreach($days as $day)
                            <option value="{{ $day }}">{{ $day }}</option>
                        @endforeach
                    </select>
                </div>
                <div class="col-md-3 d-flex align-items-end">
                    <button type="button" id="btnAddPlan" class="btn btn-primary w-100">
                        ADD +
                    </button>
                </div>
            </div>

            <form id="filtersForm" action="{{ route('horeca.visit-plans.index') }}" method="GET">
                <div class="row">
                    <div class="col-md-10">
                        <div class="input-group mb-3">
                            <input type="text" class="form-control" placeholder="Type and press enter to search"
                                name="search" value="{{ request('search') }}">
                        </div>
                    </div>
                    <div class="col-md-2">
                        <select id="perPageFilter" class="form-control">
                            <option value="10" {{ session('perPage', 10) == 10 ? 'selected' : '' }}>10 Rows</option>
                            <option value="20" {{ session('perPage') == 20 ? 'selected' : '' }}>20 Rows</option>
                            <option value="50" {{ session('perPage') == 50 ? 'selected' : '' }}>50 Rows</option>
                            <option value="100" {{ session('perPage') == 100 ? 'selected' : '' }}>100 Rows</option>
                        </select>
                    </div>
                </div>
            </form>

            <div class="table-responsive">
                <table class="table mt-3 table-striped" id="visitPlansTable">
                    <thead class="bg-light">
                        <tr>
                            <th scope="col" style="width: 15%;">LSR</th>
                            <th scope="col" style="width: 15%;">Route</th>
                            <th scope="col" style="width: 10%;">Day</th>
                            <th scope="col" style="width: 45%;">Outlets (Visit Freq)</th>
                            <th scope="col" style="width: 15%;">Actions</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse($visitPlansQuery as $plan)
                            <tr data-id="{{ $plan->id }}">
                                <td><strong>{{ $plan->lsr->name ?? 'N/A' }}</strong></td>
                                <td>{{ $plan->route->name ?? 'N/A' }}</td>
                                <td>{{ $plan->day }}</td>
                                <td class="editable-outlets-cell">
                                    <div class="display-outlets">
                                        @foreach($plan->outlets as $outlet)
                                            <span class="outlet-badge">
                                                {{ $outlet->name }}
                                                <span class="frequency-tag">({{ $outlet->visit_frequency ?? 0 }})</span>
                                            </span>
                                        @endforeach
                                        @if($plan->outlets->isEmpty())
                                            <span class="text-muted small">No outlets selected</span>
                                        @endif
                                        <button class="btn btn-sm btn-link p-0 ml-2 text-primary edit-outlets-btn"
                                            title="Edit Outlets">
                                            <i class="fa-solid fa-pencil"></i>
                                        </button>
                                    </div>
                                    <div class="edit-outlets-field d-none">
                                        <select class="form-control select2-multiple-outlets" multiple="multiple">
                                            @foreach($allOutlets as $outlet)
                                                 <option value="{{ $outlet->id }}" 
                                                    {{ $plan->outlets->contains($outlet->id) ? 'selected' : '' }}
                                                    data-freq="{{ $outlet->visit_frequency ?? 0 }}">
                                                    {{ $outlet->name }} ({{ $outlet->visit_frequency ?? 0 }})
                                                </option>
                                            @endforeach
                                        </select>
                                        <div class="mt-2 text-end">
                                            <button class="btn btn-sm btn-success save-outlets-btn">Save</button>
                                            <button class="btn btn-sm btn-secondary cancel-outlets-btn">Cancel</button>
                                        </div>
                                    </div>
                                </td>
                                <td>
                                    <div class="d-inline-flex table-action-btns">
                                        <a href="#" class="btn-delete" data-id="{{ $plan->id }}" title="Delete">
                                            <i
                                                class="fa-solid fa-trash-can rounded-5 p-1 d-inline-flex align-items-center justify-content-center action-btn theme-red"></i>
                                        </a>
                                        <form id="delete-form-{{ $plan->id }}"
                                            action="{{ route('horeca.visit-plans.destroy', $plan->id) }}" method="POST"
                                            style="display: none;">
                                            @csrf
                                            @method('DELETE')
                                        </form>
                                    </div>
                                </td>
                            </tr>
                        @empty
                            <tr>
                                <td colspan="5" class="text-center">No visit plans found.</td>
                            </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
            <div class="d-flex justify-content-between mt-4 align-items-center">
                @if ($visitPlansQuery->total() > 0)
                    <div style="font-size: 14px;" class="fw-normal">
                        Showing {{ $paginationDetails['firstItem'] }} to {{ $paginationDetails['lastItem'] }} of
                        {{ $paginationDetails['total'] }} entries
                    </div>
                @endif
                <div>
                    {{ $visitPlansQuery->appends(request()->query())->links() }}
                </div>
            </div>
        </div>
    </div>
@endsection

@push('js')
    <script>
        $(document).ready(function () {
            $('.select2').select2({
                placeholder: "Please select",
                allowClear: true
            });

            $('.select2-multiple-outlets').each(function () {
                $(this).select2({
                    placeholder: "Select Outlets",
                    allowClear: true,
                    closeOnSelect: false
                });
            });

            // Quick Add Plan
            $('#btnAddPlan').click(function () {
                const lsr_id = $('#quick_lsr_id').val();
                const route_id = $('#quick_route_id').val();
                const day = $('#quick_day').val();

                if (!lsr_id || !route_id || !day) {
                    Swal.fire('Error', 'Please select LSR, Route and Day', 'error');
                    return;
                }

                $.ajax({
                    url: '{{ route("horeca.visit-plans.store") }}',
                    type: 'POST',
                    data: {
                        _token: '{{ csrf_token() }}',
                        lsr_id: lsr_id,
                        route_id: route_id,
                        day: day
                    },
                    success: function (response) {
                        if (response.success) {
                            $.toast({
                                heading: 'Success',
                                text: response.message,
                                position: 'top-right',
                                icon: 'success'
                            });
                            location.reload(); // Simple reload to refresh table
                        }
                    },
                    error: function (xhr) {
                        Swal.fire('Error', xhr.responseJSON.message || 'Error occurred', 'error');
                    }
                });
            });

            // Toggle Edit Outlets
            $('.edit-outlets-btn').click(function () {
                const row = $(this).closest('tr');
                row.find('.display-outlets').addClass('d-none');
                row.find('.edit-outlets-field').removeClass('d-none');
            });

            $('.cancel-outlets-btn').click(function () {
                const row = $(this).closest('tr');
                row.find('.edit-outlets-field').addClass('d-none');
                row.find('.display-outlets').removeClass('d-none');
            });

            // Save Outlets
            $('.save-outlets-btn').click(function () {
                const row = $(this).closest('tr');
                const planId = row.data('id');
                const selectedOutlets = row.find('.select2-multiple-outlets').val();

                $.ajax({
                    url: `{{ url('horeca/visit-plans') }}/${planId}/outlets`,
                    type: 'PUT',
                    data: {
                        _token: '{{ csrf_token() }}',
                        outlets: selectedOutlets
                    },
                    success: function (response) {
                        if (response.success) {
                            $.toast({
                                heading: 'Success',
                                text: response.message,
                                position: 'top-right',
                                icon: 'success'
                            });
                            location.reload();
                        }
                    },
                    error: function (xhr) {
                        Swal.fire('Error', xhr.responseJSON.message || 'Error occurred', 'error');
                    }
                });
            });

            // Delete confirmation
            $('.btn-delete').click(function (e) {
                e.preventDefault();
                const id = $(this).data('id');
                Swal.fire({
                    title: 'Are you sure?',
                    text: "You won't be able to revert this!",
                    icon: 'warning',
                    showCancelButton: true,
                    confirmButtonColor: '#3085d6',
                    cancelButtonColor: '#d33',
                    confirmButtonText: 'Yes, delete it!'
                }).then((result) => {
                    if (result.isConfirmed) {
                        document.getElementById('delete-form-' + id).submit();
                    }
                });
            });

            // Rows per page filter
            document.getElementById('perPageFilter').addEventListener('change', function () {
                const perPage = this.value;
                const urlParams = new URLSearchParams(window.location.search);
                urlParams.set('perPage', perPage);
                window.location.href = '{{ route("horeca.visit-plans.index") }}?' + urlParams.toString();
            });
        });
    </script>
@endpush