@extends('layouts.app')

@section('title', 'POSM Audit Schedule')

@section('content')

    {{-- Flash Messages --}}
    @if(session('success'))
        <div class="alert alert-success alert-dismissible fade show mt-3 mx-3 rounded-border shadow-none" role="alert">
            <i class="fa-solid fa-circle-check me-1"></i> {{ session('success') }}
            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
        </div>
    @endif

    @if($errors->any())
        <div class="alert alert-danger alert-dismissible fade show mt-3 mx-3 rounded-border shadow-none" role="alert">
            <i class="fa-solid fa-circle-exclamation me-1"></i> Please fix the errors below.
            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
        </div>
    @endif

    {{-- Fixed Top Action Bar --}}
    <div class="fixed-action-bar d-flex align-items-center justify-content-between">
        <div class="fw-semibold fixed-nav-title">POSM Audit Schedule</div>

        <div class="d-flex align-items-center">

            {{-- Extra Actions on Left --}}
            <div class="mx-2 d-flex align-items-center">
                <i class="fa-solid fa-list-ul fixed-nav-btn view-switcher p-1 d-inline-flex align-items-center justify-content-center mx-1 fixed-nav-btn-active"
                    data-view="list" data-toggle="tooltip" title="List View"></i>
                <i class="fa-regular fa-calendar-days fixed-nav-btn view-switcher p-1 d-inline-flex align-items-center justify-content-center mx-1 fixed-nav-btn-active"
                    data-view="calendar" data-toggle="tooltip" title="Calendar View"></i>
            </div>

            <i class="fa-solid fa-file-import fixed-nav-btn fixed-nav-btn-active p-1 d-inline-flex align-items-center justify-content-center mx-1"
                data-toggle="tooltip" title="Import/Export"></i>

            <i class="fa-solid fa-plus-minus fixed-nav-btn fixed-nav-btn-active p-1 d-inline-flex align-items-center justify-content-center mx-1"
                data-toggle="modal" data-target="#generateManualModal" title="Generate Manual Audit"></i>

            {{-- Standardized 6 Icons (Icons only if routes not defined) --}}
            <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>

            <div class="dropdown">
                <i class="fa-solid fa-columns fixed-nav-btn p-1 d-inline-flex align-items-center justify-content-center mx-1"
                    id="columnVisibilityDropdown" data-toggle="dropdown" aria-haspopup="true"
                    aria-expanded="false" title="Column Visibility"></i>
            </div>
        </div>
    </div>

    <div id="listView" class="view-container {{ request('view') == 'calendar' ? 'd-none' : '' }}">
        <div class="card mt-3 rounded-border">
            <div class="card-body">
                <form id="filtersForm" action="{{ route('horeca.posm-audits.index') }}" method="GET">
                    <input type="hidden" name="view" value="list">
                    <div class="row">
                        {{-- Search Input --}}
                        <div class="col-md-5">
                            <div class="input-group mb-3">
                                <input type="text" class="form-control"
                                    placeholder="Type and press enter to search by outlet name..." name="search"
                                    value="{{ request('search') }}" id="search_input">
                            </div>
                        </div>

                        {{-- Bulk Actions Dropdown --}}
                        <div class="col-md-2">
                            <div class="dropdown">
                                <button class="btn btn-de-dark filter-btn dropdown-toggle w-100" type="button"
                                    id="bulkActionsButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"
                                    disabled>
                                    Bulk Actions
                                </button>
                                <div class="dropdown-menu">
                                    <a class="dropdown-item" href="#">Mark Completed</a>
                                    <a class="dropdown-item" href="#">Flag Issues</a>
                                </div>
                            </div>
                        </div>

                        {{-- Filters Toggle Button --}}
                        <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>

                        {{-- Per Page Select --}}
                        <div class="col-md-3">
                            <select name="perPage" class="form-control" onchange="this.form.submit()">
                                <option value="10" {{ request('perPage', 10) == 10 ? 'selected' : '' }}>10 Rows</option>
                                <option value="20" {{ request('perPage') == 20 ? 'selected' : '' }}>20 Rows</option>
                                <option value="50" {{ request('perPage') == 50 ? 'selected' : '' }}>50 Rows</option>
                                <option value="100" {{ request('perPage') == 100 ? 'selected' : '' }}>100 Rows</option>
                            </select>
                        </div>
                    </div>

                    {{-- Collapsible Filters Section --}}
                    <div class="row">
                        <div class="col-md-12 mt-2">
                            <div class="collapse {{ request('status') || request('tm_id') || request('date_range') ? 'show' : '' }}"
                                id="filtersCollapse">
                                <div class="row">
                                    <div class="col-md-3 mb-2">
                                        <label for="status" class="form-label">Status</label>
                                        <select name="status" id="status" class="form-control"
                                            onchange="this.form.submit()">
                                            <option value="">All Statuses</option>
                                            <option value="scheduled" {{ request('status') == 'scheduled' ? 'selected' : '' }}>Scheduled</option>
                                            <option value="in_progress" {{ request('status') == 'in_progress' ? 'selected' : '' }}>In Progress</option>
                                            <option value="completed" {{ request('status') == 'completed' ? 'selected' : '' }}>Completed</option>
                                            <option value="flagged" {{ request('status') == 'flagged' ? 'selected' : '' }}>Flagged</option>
                                        </select>
                                    </div>
                                    <div class="col-md-3 mb-2">
                                        <label for="tm_id" class="form-label">Assigned TM</label>
                                        <select name="tm_id" id="tm_id" class="form-control select2"
                                            onchange="this.form.submit()">
                                            <option value="">All TMs</option>
                                            @foreach($tms as $tm)
                                                <option value="{{ $tm->id }}" {{ request('tm_id') == $tm->id ? 'selected' : '' }}>
                                                    {{ $tm->name }}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                    <div class="col-md-4 mb-2">
                                        <label for="date_range" class="form-label">Date Range</label>
                                        <input type="text" name="date_range" id="date_range"
                                            class="form-control flatpickr-range" placeholder="Select range"
                                            value="{{ request('date_range') }}" onchange="this.form.submit()">
                                    </div>
                                </div>
                                <div class="row mt-3">
                                    <div class="col-md-12">
                                        <a href="{{ route('horeca.posm-audits.index') }}"
                                            class="btn btn-warning fw-bold px-4"
                                            style="background-color: #FFC107; border: none;">Clear</a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </form>

                <div class="table-responsive mt-3">
                    <table class="table table-striped table-hover text-nowrap">
                        <thead class="bg-light">
                            <tr>
                                <th style="width: 10px;"><input type="checkbox" id="selectAll"></th>
                                <th>Outlet Name</th>
                                <th>Type</th>
                                <th>Assigned TM</th>
                                <th>Created By</th>
                                <th>Scheduled Date</th>
                                <th>Due Date</th>
                                <th>Completed Date</th>
                                <th class="text-center">Status</th>
                                <th class="text-center">LSR Execute</th>
                                <th class="text-center">Indicators</th>
                                <th class="text-end">Actions</th>
                            </tr>
                        </thead>
                        <tbody>
                            @forelse($audits as $audit)
                                @php
                                    $today = \Carbon\Carbon::today();
                                    $dueDate = \Carbon\Carbon::parse($audit->due_date);
                                    $isOverdue = $audit->status != 'completed' && $today->gt($dueDate);
                                @endphp
                                <tr>
                                    <td><input type="checkbox" class="recordCheckbox" value="{{ $audit->id }}"></td>
                                    <td>
                                        <a href="{{ route('horeca.posm-audits.show', $audit->id) }}"
                                            class="fw-bold text-primary">{{ $audit->outlet->name }}</a>
                                    </td>
                                    <td>
                                        <span class="badge bg-soft-info text-info">{{ $audit->outlet->outlet_type }}</span>
                                    </td>
                                    <td>
                                        <div class="d-flex align-items-center">
                                            <div class="avatar-xs me-2">
                                                <span class="avatar-title rounded-circle bg-soft-primary text-primary">
                                                    {{ substr($audit->tm->name ?? 'U', 0, 1) }}
                                                </span>
                                            </div>
                                            <span>{{ $audit->tm->name ?? 'Unassigned' }}</span>
                                        </div>
                                    </td>
                                    <td>
                                        <span>{{ $audit->creator->name ?? 'System' }}</span>
                                    </td>
                                    <td>{{ $audit->scheduled_date->format('Y-m-d') }}</td>
                                    <td class="{{ $isOverdue ? 'text-danger fw-bold' : '' }}">
                                        {{ $audit->due_date->format('Y-m-d') }}</td>
                                    <td>
                                        @if($audit->status == 'completed' && $audit->completed_date)
                                            {{ $audit->completed_date->format('Y-m-d') }}
                                        @else
                                            -
                                        @endif
                                    </td>
                                    <td class="text-center">
                                        @if($audit->status == 'completed')
                                            <span class="badge badge-soft-success border border-success-subtle px-2"
                                                style="color: #0acf97 !important; background-color: rgba(10, 207, 151, 0.1) !important; border-radius: 20px;">
                                                Completed
                                            </span>
                                        @elseif($audit->status == 'in_progress')
                                            <span class="badge badge-soft-info border border-info-subtle px-2"
                                                style="color: #36b9cc !important; background-color: rgba(54, 185, 204, 0.1) !important; border-radius: 20px;">
                                                In Progress
                                            </span>
                                        @elseif($audit->status == 'flagged')
                                            <span class="badge badge-soft-danger border border-danger-subtle px-2"
                                                style="color: #f06548 !important; background-color: rgba(240, 101, 72, 0.1) !important; border-radius: 20px;">
                                                Flagged
                                            </span>
                                        @elseif($isOverdue)
                                            <span class="badge badge-soft-danger border border-danger-subtle px-2"
                                                style="color: #f06548 !important; background-color: rgba(240, 101, 72, 0.1) !important; border-radius: 20px;">
                                                Overdue
                                            </span>
                                        @else
                                            <span class="badge badge-soft-warning border border-warning-subtle px-2"
                                                style="color: #f7b84b !important; background-color: rgba(247, 184, 75, 0.1) !important; border-radius: 20px;">
                                                Scheduled
                                            </span>
                                        @endif
                                    </td>
                                    <td class="text-center">
                                        <div class="form-check form-switch d-flex align-items-center justify-content-center">
                                            <input class="form-check-input lsr-execute-toggle" type="checkbox"
                                                data-id="{{ $audit->id }}"
                                                {{ $audit->lsr_can_execute ? 'checked' : '' }}
                                                style="cursor: pointer; width: 35px; height: 18px;">
                                        </div>
                                    </td>
                                    <td class="text-center">
                                        @if($audit->status == 'completed')
                                            <i class="fa-solid fa-circle-check text-success"></i>
                                        @elseif($audit->status == 'flagged')
                                            <i class="fa-solid fa-flag text-danger"></i>
                                        @elseif($isOverdue)
                                            <i class="fa-solid fa-triangle-exclamation text-warning"></i>
                                        @else
                                            <i class="fa-regular fa-clock text-muted"></i>
                                        @endif
                                    </td>
                                    <td class="text-end">
                                        <div class="d-inline-flex table-action-btns">
                                            <a href="{{ route('horeca.posm-audits.show', $audit->id) }}" title="View Details">
                                                <i
                                                    class="fa-solid fa-eye rounded-5 p-1 d-inline-flex align-items-center justify-content-center action-btn theme-blue"></i>
                                            </a>
                                            <form action="{{ route('horeca.posm-audits.flag-issue', $audit->id) }}"
                                                method="POST" class="d-inline">
                                                @csrf
                                                <button type="submit" class="border-0 bg-transparent p-0">
                                                    <i
                                                        class="fa-solid fa-flag rounded-5 p-1 d-inline-flex align-items-center justify-content-center action-btn theme-red"></i>
                                                </button>
                                            </form>
                                        </div>
                                    </td>
                                </tr>
                            @empty
                                <tr>
                                    <td colspan="11" class="text-center py-4">
                                        <div class="text-muted">
                                            <i class="fa-solid fa-calendar-xmark fa-3x mb-3 opacity-25"></i>
                                            <p>No audits found matching your criteria.</p>
                                        </div>
                                    </td>
                                </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>

                <div class="d-flex justify-content-between mt-4 align-items-center">
                    <div style="font-size: 14px;" class="fw-normal text-muted">
                        Showing {{ $audits->firstItem() ?? 0 }} to {{ $audits->lastItem() ?? 0 }} of {{ $audits->total() }}
                        entries
                    </div>
                    <div>
                        {{ $audits->links() }}
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div id="calendarView" class="view-container {{ request('view') == 'calendar' ? '' : 'd-none' }}">
        <div class="card mt-3 rounded-border">
            <div class="card-body">
                <div id="calendar"></div>
            </div>
        </div>
    </div>

    {{-- Generate Manual Audit Modal --}}
    <div class="modal fade" id="generateManualModal" tabindex="-1" role="dialog" aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content rounded-border">
                <form action="{{ route('horeca.posm-audits.generate-manual') }}" method="POST">
                    @csrf
                    <div class="modal-header">
                        <h5 class="modal-title fw-bold">Generate Manual Audit</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body p-4">
                        @if ($errors->any())
                            <div class="alert alert-danger py-2 small">
                                <ul class="mb-0">
                                    @foreach ($errors->all() as $error)
                                        <li>{{ $error }}</li>
                                    @endforeach
                                </ul>
                            </div>
                        @endif
                        <div class="form-group mb-3">
                            <label class="form-label fw-bold">Select Outlet</label>
                            <select name="outlet_id" class="form-control select2-modal" required style="width: 100%;">
                                <option value="">Select an outlet</option>
                                @foreach(\Modules\HoReCa\Models\Outlet::where('status', 'active')->get() as $outlet)
                                    <option value="{{ $outlet->id }}">{{ $outlet->name }} ({{ $outlet->territory->name ?? 'No Territory' }})</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="form-group mb-3">
                            <label class="form-label fw-bold">Assigned TM (Optional)</label>
                            <select name="assigned_tm_id" class="form-control select2-modal" style="width: 100%;">
                                <option value="">Auto-assign from outlet</option>
                                @foreach($tms as $tm)
                                    <option value="{{ $tm->id }}">{{ $tm->name }}</option>
                                @endforeach
                            </select>
                            <small class="text-muted">Will use outlet's assigned TM if left empty.</small>
                        </div>
                        <div class="form-group mb-0">
                            <label class="form-label fw-bold">Scheduled Date</label>
                            <input type="date" name="scheduled_date" class="form-control" required min="{{ date('Y-m-d') }}" value="{{ date('Y-m-d') }}">
                        </div>
                    </div>
                    <div class="modal-footer border-0">
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
                        <button type="submit" class="btn btn-primary px-4">Generate</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

@endsection

@push('css')
    <link href='https://cdn.jsdelivr.net/npm/fullcalendar@3.10.2/dist/fullcalendar.min.css' rel='stylesheet' />
    <style>
        .rounded-border {
            border-radius: 12px;
            border: 1px solid #e0e0e0;
        }

        .fixed-nav-btn {
            width: 32px !important;
            height: 32px !important;
            font-size: 14px !important;
            background-color: #F6F6F6 !important;
            color: #000000 !important;
            border-radius: 50% !important;
            border: none !important;
            cursor: default !important;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            margin: 0 4px;
            transition: all 0.2s;
        }

        .fixed-nav-btn:hover {
            opacity: 0.85;
            transform: scale(1.05);
        }

        .fixed-nav-btn-active {
            background-color: #FFC107 !important;
            color: #000000 !important;
            cursor: pointer !important;
        }

        .theme-blue {
            color: #4489e4;
        }

        .theme-red {
            color: #f06548;
        }

        .action-btn {
            transition: all 0.2s;
        }

        .action-btn:hover {
            transform: scale(1.1);
        }

        .avatar-xs {
            height: 2rem;
            width: 2rem;
        }

        .avatar-title {
            align-items: center;
            display: flex;
            font-weight: 500;
            height: 100%;
            justify-content: center;
            width: 100%;
        }

        .bg-soft-primary {
            background-color: rgba(69, 122, 218, 0.15);
        }

        .bg-soft-info {
            background-color: rgba(54, 185, 204, 0.15);
        }

        /* Calendar Soft Colors */
        .bg-soft-primary-cal {
            background-color: #eef1f9 !important;
            border-color: #50649c !important;
            color: #50649c !important;
        }

        .bg-soft-success-cal {
            background-color: #e6f7ef !important;
            border-color: #0acf97 !important;
            color: #0acf97 !important;
        }

        .bg-soft-danger-cal {
            background-color: #fef4f2 !important;
            border-color: #f06548 !important;
            color: #f06548 !important;
        }

        .bg-soft-warning-cal {
            background-color: #fff9e6 !important;
            border-color: #f7b84b !important;
            color: #f7b84b !important;
        }

        .fc-event {
            padding: 2px 5px;
            border-radius: 4px;
            font-weight: 500;
        }
    </style>
@endpush

@push('js')
    <script src='https://cdn.jsdelivr.net/npm/moment@2.29.1/min/moment.min.js'></script>
    <script src='https://cdn.jsdelivr.net/npm/fullcalendar@3.10.2/dist/fullcalendar.min.js'></script>
    <script>
        $(document).ready(function () {
            if ($.fn.select2) {
                $('.select2').select2({ placeholder: "Select an option", allowClear: true, theme: 'bootstrap-5' });
                $('.select2-modal').select2({ dropdownParent: $('#generateManualModal'), theme: 'bootstrap-5' });
            }

            if (typeof flatpickr !== 'undefined') {
                flatpickr(".flatpickr-range", { mode: "range", dateFormat: "Y-m-d" });
            }

            // View Switcher
            let calendarInitialized = false;
            $('.view-switcher').on('click', function () {
                const view = $(this).data('view');
                // Removed the removeClass to keep both yellow as requested
                // $('.view-switcher').removeClass('fixed-nav-btn-active');
                // $(this).addClass('fixed-nav-btn-active');

                if (view === 'list') {
                    $('#listView').removeClass('d-none');
                    $('#calendarView').addClass('d-none');
                } else {
                    $('#listView').addClass('d-none');
                    $('#calendarView').removeClass('d-none');
                    initializeCalendar();
                }
                const url = new URL(window.location);
                url.searchParams.set('view', view);
                window.history.pushState({}, '', url);
            });

            function initializeCalendar() {
                if (calendarInitialized) { $('#calendar').fullCalendar('render'); return; }
                $('#calendar').fullCalendar({
                    header: { left: 'prev,next today', center: 'title', right: 'month,agendaWeek,agendaDay' },
                    events: '{{ route("horeca.posm-audits.events") }}',
                    eventLimit: true,
                    eventClick: function (event) { if (event.url) { window.location.href = event.url; return false; } }
                });
                calendarInitialized = true;
            }

            if ('{{ request("view") }}' === 'calendar') { initializeCalendar(); }

            // Auto-reopen modal if there are errors
            @if($errors->any())
                $('#generateManualModal').modal('show');
            @endif

            // Bulk actions logic
            const bulkActionsButton = $('#bulkActionsButton');
            $('#selectAll').on('change', function () {
                $('.recordCheckbox').prop('checked', $(this).prop('checked'));
                updateBulkUI();
            });
            $(document).on('change', '.recordCheckbox', function () { updateBulkUI(); });

            function updateBulkUI() {
                const selectedCount = $('.recordCheckbox:checked').length;
                bulkActionsButton.prop('disabled', selectedCount === 0);
                bulkActionsButton.text(selectedCount > 0 ? `Bulk Actions (${selectedCount})` : 'Bulk Actions');
            }

            // Toggle LSR Execution
            $('.lsr-execute-toggle').on('change', function() {
                const id = $(this).data('id');
                const canExecute = $(this).is(':checked') ? 1 : 0;
                
                $.ajax({
                    url: `/horeca/posm-audits/${id}/toggle-lsr-execution`,
                    type: 'PATCH',
                    data: {
                        _token: '{{ csrf_token() }}',
                        lsr_can_execute: canExecute
                    },
                    success: function(response) {
                        if (response.success) {
                            $.toast({
                                heading: 'Success',
                                text: 'LSR execution permission updated successfully.',
                                position: 'top-right',
                                bgColor: '#1ecab8',
                                loaderBg: '#ecf0f1',
                                icon: 'success',
                                hideAfter: 3000,
                                stack: 1
                            });
                        }
                    },
                    error: function(xhr) {
                        $.toast({
                            heading: 'Error',
                            text: 'Something went wrong. Please try again.',
                            position: 'top-right',
                            loaderBg: '#bf441d',
                            icon: 'error',
                            hideAfter: 3000,
                            stack: 1
                        });
                    }
                });
            });
        });
    </script>
@endpush