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

@push('css')
<style>
    .status-select {
        display: inline-block !important;
        width: 125px !important;
        height: 32px !important;
        padding: 0 24px 0 12px !important;
        font-size: 13px !important;
        font-weight: 700 !important;
        line-height: 1.5 !important;
        text-align: center !important;
        text-align-last: center !important;
        vertical-align: middle !important;
        border: 1px solid transparent !important;
        border-radius: 20px !important;
        appearance: none !important;
        -webkit-appearance: none !important;
        -moz-appearance: none !important;
        cursor: pointer !important;
        transition: all 0.2s ease-in-out !important;
        box-shadow: 0 1px 2px rgba(0,0,0,0.05) !important;
    }
    .status-select:focus {
        outline: none !important;
        box-shadow: 0 0 0 3px rgba(0,0,0,0.1) !important;
    }
    .status-pending {
        background-color: #fff3cd !important;
        color: #856404 !important;
        border-color: #ffeeba !important;
        background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23856404' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3E%3C/svg%3E") !important;
        background-repeat: no-repeat !important;
        background-position: right 12px center !important;
        background-size: 10px 10px !important;
    }
    .status-completed {
        background-color: #d4edda !important;
        color: #155724 !important;
        border-color: #c3e6cb !important;
        background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23155724' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3E%3C/svg%3E") !important;
        background-repeat: no-repeat !important;
        background-position: right 12px center !important;
        background-size: 10px 10px !important;
    }
    .status-missed, .status-cancelled, .status-failed {
        background-color: #f8d7da !important;
        color: #721c24 !important;
        border-color: #f5c6cb !important;
        background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23721c24' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3E%3C/svg%3E") !important;
        background-repeat: no-repeat !important;
        background-position: right 12px center !important;
        background-size: 10px 10px !important;
    }
</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 Plans</div>
    <div class="d-flex align-items-center">
        <i class="fa-solid fa-gears fixed-nav-btn fixed-nav-btn-active rounded-5 p-1 d-inline-flex align-items-center justify-content-center mx-1"
            id="generateVisitPlansBtn" data-toggle="tooltip" title="Generate Visit Plans"></i>

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

        <i class="fa-regular fa-plus fixed-nav-btn rounded-5 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 rounded-5 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 rounded-5 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 rounded-5 p-1 d-inline-flex align-items-center justify-content-center mx-1"
            data-toggle="tooltip" title="Delete"></i>

        <a href="{{ route('horeca.index') }}">
            <i class="fa-solid fa-xmark fixed-nav-btn rounded-5 p-1 d-inline-flex align-items-center justify-content-center ms-1"
                data-toggle="tooltip" title="Close"></i>
        </a>

        <i class="fa-solid fa-columns fixed-nav-btn rounded-5 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">
    <form id="filtersForm" action="{{ route('horeca.visit-plans.generated') }}" method="GET">
        <div class="card-body">
            <div class="row">
                <div class="col-md-8">
                    <div class="input-group mb-3">
                        <input type="text" class="form-control" placeholder="Type and press enter to search by LSR, Route or Outlet"
                            name="search" value="{{ request('search') }}">
                    </div>
                </div>
                <div class="col-md-2 d-grid">
                    <button type="button" class="btn btn-de-dark filter-btn" data-toggle="collapse"
                        data-target="#filtersCollapse" aria-expanded="false"
                        aria-controls="filtersCollapse">Filters</button>
                </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>
            
            <div class="col-md-12 mt-2">
                <div class="collapse {{ request('lsr_id') || request('route_id') || request('date') || request('status') ? 'show' : '' }}" id="filtersCollapse">
                    <div class="row">
                        <div class="col-md-3">
                            <label for="lsr_id" class="form-label">LSR</label>
                            <select name="lsr_id" id="lsr_id" class="form-control select2" onchange="document.getElementById('filtersForm').submit()">
                                <option value="">All LSRs</option>
                                @foreach($lsrUsers as $user)
                                    <option value="{{ $user->id }}" {{ request('lsr_id') == $user->id ? 'selected' : '' }}>
                                        {{ $user->name }}
                                    </option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col-md-3">
                            <label for="route_id" class="form-label">Route</label>
                            <select name="route_id" id="route_id" class="form-control select2" onchange="document.getElementById('filtersForm').submit()">
                                <option value="">All Routes</option>
                                @foreach($routes as $route)
                                    <option value="{{ $route->id }}" {{ request('route_id') == $route->id ? 'selected' : '' }}>
                                        {{ $route->name }}
                                    </option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col-md-3">
                            <label for="date" class="form-label">Date</label>
                            <input type="date" name="date" class="form-control" value="{{ request('date') }}" onchange="document.getElementById('filtersForm').submit()">
                        </div>
                        <div class="col-md-3">
                            <label for="status" class="form-label">Status</label>
                            <select name="status" id="status" class="form-control" onchange="document.getElementById('filtersForm').submit()">
                                <option value="">All Statuses</option>
                                @foreach($statuses as $status)
                                    <option value="{{ $status }}" {{ request('status') == $status ? 'selected' : '' }}>
                                        {{ ucfirst($status) }}
                                    </option>
                                @endforeach
                            </select>
                        </div>
                    </div> 
                    <div class="mt-3">
                        <a href="{{ route('horeca.visit-plans.generated') }}" class="btn btn-primary">Clear</a>
                    </div>
                </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%;">Date / Day</th>
                            <th scope="col" style="width: 20%;">LSR</th>
                            <th scope="col" style="width: 20%;">Route</th>
                            <th scope="col" style="width: 25%;">Outlet</th>
                            <th scope="col" style="width: 20%;" class="text-center">Status</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse($visitPlans as $plan)
                            <tr data-id="{{ $plan->id }}">
                                <td>
                                    <strong>{{ \Carbon\Carbon::parse($plan->date)->format('Y-m-d') }}</strong><br>
                                    <small class="text-muted">{{ \Carbon\Carbon::parse($plan->date)->format('l') }}</small>
                                </td>
                                <td><strong>{{ $plan->lsr->name ?? 'N/A' }}</strong></td>
                                <td>{{ $plan->route->name ?? 'N/A' }}</td>
                                <td>{{ $plan->outlet->name ?? 'N/A' }}</td>
                                <td class="text-center">
                                    <select class="status-select status-{{ $plan->status }}" 
                                        data-id="{{ $plan->id }}">
                                        @foreach($statuses as $status)
                                            <option value="{{ $status }}" {{ $plan->status == $status ? 'selected' : '' }}>
                                                {{ ucfirst($status) }}
                                            </option>
                                        @endforeach
                                    </select>
                                </td>
                            </tr>
                        @empty
                            <tr>
                                <td colspan="5" class="text-center">No visit plan data found.</td>
                            </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>

            <div class="d-flex justify-content-between mt-4 align-items-center">
                @if ($visitPlans->total() > 0)
                    <div style="font-size: 14px;" class="fw-normal">
                        Showing {{ $paginationDetails['firstItem'] }} to {{ $paginationDetails['lastItem'] }} of {{ $paginationDetails['total'] }} entries
                    </div>
                @endif
                <div>
                    {{ $visitPlans->appends(request()->query())->links() }}
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

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

        // Status Update
        $('.status-select').on('change', function () {
            const planId = $(this).data('id');
            const newStatus = $(this).val();
            const dropdown = $(this);

            $.ajax({
                url: `{{ url('horeca/visit-plans-manual') }}/${planId}/status`,
                type: 'PUT',
                data: {
                    _token: '{{ csrf_token() }}',
                    status: newStatus
                },
                success: function (response) {
                    if (response.success) {
                        $.toast({
                            heading: 'Success',
                            text: response.message,
                            position: 'top-right',
                            icon: 'success'
                        });
                        
                        // Update styles
                        dropdown.removeClass('status-pending status-completed status-missed status-cancelled status-failed')
                                .addClass('status-' + newStatus);
                    }
                },
                error: function (xhr) {
                    Swal.fire('Error', xhr.responseJSON.message || 'Error occurred', 'error');
                    location.reload();
                }
            });
        });

        // Generate Visit Plans Button Handler
        $('#generateVisitPlansBtn').click(function () {
            Swal.fire({
                title: 'Generate Visit Plans?',
                text: "This will run the scheduler function to generate/update visit plans for the current week.",
                icon: 'question',
                showCancelButton: true,
                confirmButtonColor: '#3085d6',
                cancelButtonColor: '#d33',
                confirmButtonText: 'Yes, generate!'
            }).then((result) => {
                if (result.isConfirmed) {
                    Swal.fire({
                        title: 'Generating...',
                        text: 'Please wait while visit plans are generated.',
                        allowOutsideClick: false,
                        didOpen: () => {
                            Swal.showLoading();
                        }
                    });

                    $.ajax({
                        url: `{{ route('horeca.visit-plans.generate') }}`,
                        type: 'POST',
                        data: {
                            _token: '{{ csrf_token() }}'
                        },
                        success: function (response) {
                            if (response.success) {
                                Swal.fire({
                                    icon: 'success',
                                    title: 'Generated!',
                                    text: response.message,
                                    timer: 2000,
                                    showConfirmButton: false
                                }).then(() => {
                                    location.reload();
                                });
                            } else {
                                Swal.fire('Error', response.message || 'Error occurred', 'error');
                            }
                        },
                        error: function (xhr) {
                            Swal.fire('Error', xhr.responseJSON.message || 'Error occurred', 'error');
                        }
                    });
                }
            });
        });

        // 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.generated") }}?' + urlParams.toString();
        });

        $('[data-toggle="tooltip"]').tooltip();
    });
</script>
@endpush