@extends('layouts.app')
@section('title', 'Service Requests')

@section('content')

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

        <div class="d-flex align-items-center">
            @can('HoReCa Service Requests manage categories')
                <a href="{{ route('horeca.service-request-categories.index') }}" data-toggle="tooltip"
                    title="Manage Categories">
                    <i class="fa-regular fa-folder-open fixed-nav-btn p-1 d-inline-flex align-items-center justify-content-center mx-1"></i>
                </a>
            @endcan

            @can('HoReCa Service Requests create')
                <a href="{{ route('horeca.service-requests.create') }}" data-toggle="tooltip" title="Create Manual Request">
                    <i class="fa-regular fa-plus fixed-nav-btn fixed-nav-btn-active p-1 d-inline-flex align-items-center justify-content-center mx-1"></i>
                </a>
            @endcan

            <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>

            <!-- Column Visibility Dropdown Button -->
            <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 class="dropdown-menu dropdown-menu-right columns-menu" aria-labelledby="columnVisibilityDropdown"
                    style="min-width: 200px; max-height: 400px; overflow-y: auto;">
                    <li><label class="px-2"><input type="checkbox" class="columnCheckbox" data-column="id" checked> SR
                            ID</label></li>
                    <li><label class="px-2"><input type="checkbox" class="columnCheckbox" data-column="title" checked>
                            Title</label></li>
                    <li><label class="px-2"><input type="checkbox" class="columnCheckbox" data-column="category" checked>
                            Category</label></li>
                    <li><label class="px-2"><input type="checkbox" class="columnCheckbox" data-column="outlet" checked>
                            Outlet</label></li>
                    <li><label class="px-2"><input type="checkbox" class="columnCheckbox" data-column="creator" checked>
                            Created By</label></li>
                    <li><label class="px-2"><input type="checkbox" class="columnCheckbox" data-column="assignee" checked>
                            Assigned To</label></li>
                    <li><label class="px-2"><input type="checkbox" class="columnCheckbox" data-column="priority" checked>
                            Priority</label></li>
                    <li><label class="px-2"><input type="checkbox" class="columnCheckbox" data-column="status" checked>
                            Status</label></li>
                    <li><label class="px-2"><input type="checkbox" class="columnCheckbox" data-column="sla" checked> SLA
                            Due</label></li>
                    <li><label class="px-2"><input type="checkbox" class="columnCheckbox" data-column="date" checked>
                            Created Date</label></li>
                    <li><label class="px-2"><input type="checkbox" class="columnCheckbox" data-column="action" checked>
                            Actions</label></li>
                </div>
            </div>
        </div>
    </div>

    <div class="card mt-3 rounded-border">
        <div class="card-body">
            <form id="filtersForm" action="{{ route('horeca.service-requests.index') }}" method="GET">
                <div class="row">
                    {{-- Search Input --}}
                    <div class="col-md-6">
                        <div class="input-group mb-3">
                            <input type="text" class="form-control" placeholder="Search by title, outlet, or ID..."
                                name="search" value="{{ request('search') }}" id="search_input">
                        </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-2">
                        <select name="perPage" class="form-control" onchange="this.form.submit()">
                            <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>

                    {{-- View Toggle Placeholder --}}
                    <div class="col-md-2 d-grid">
                        <button type="button" class="btn btn-outline-secondary filter-btn">
                            <i class="fa-solid fa-table-cells-large me-1"></i> Kanban
                        </button>
                    </div>
                </div>

                {{-- Collapsible Filters Section --}}
                <div class="row">
                    <div class="col-md-12 mt-2">
                        <div class="collapse {{ request('status') || request('category_id') || request('priority') || request('assigned_to') || request('created_from') || request('created_to') || request('sla_breached') ? '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="document.getElementById('filtersForm').submit()">
                                        <option value="">All Statuses</option>
                                        <option value="open" {{ request('status') == 'open' ? 'selected' : '' }}>Open</option>
                                        <option value="in_progress" {{ request('status') == 'in_progress' ? 'selected' : '' }}>In Progress</option>
                                        <option value="approved" {{ request('status') == 'approved' ? 'selected' : '' }}>Approved</option>
                                        <option value="rejected" {{ request('status') == 'rejected' ? 'selected' : '' }}>Rejected</option>
                                        <option value="resolved" {{ request('status') == 'resolved' ? 'selected' : '' }}>Resolved</option>
                                        <option value="closed" {{ request('status') == 'closed' ? 'selected' : '' }}>Closed</option>
                                        <option value="cancelled" {{ request('status') == 'cancelled' ? 'selected' : '' }}>Cancelled</option>
                                    </select>
                                </div>
                                <div class="col-md-3 mb-2">
                                    <label for="category_id" class="form-label">Category</label>
                                    <select name="category_id" id="category_id" class="form-control"
                                        onchange="document.getElementById('filtersForm').submit()">
                                        <option value="">All Categories</option>
                                        @foreach($categories as $category)
                                            <option value="{{ $category->id }}" {{ request('category_id') == $category->id ? 'selected' : '' }}>{{ $category->name }}</option>
                                        @endforeach
                                    </select>
                                </div>
                                <div class="col-md-3 mb-2">
                                    <label for="priority" class="form-label">Priority</label>
                                    <select name="priority" id="priority" class="form-control"
                                        onchange="document.getElementById('filtersForm').submit()">
                                        <option value="">All Priorities</option>
                                        <option value="low" {{ request('priority') == 'low' ? 'selected' : '' }}>Low</option>
                                        <option value="medium" {{ request('priority') == 'medium' ? 'selected' : '' }}>Medium
                                        </option>
                                        <option value="high" {{ request('priority') == 'high' ? 'selected' : '' }}>High
                                        </option>
                                        <option value="critical" {{ request('priority') == 'critical' ? 'selected' : '' }}>
                                            Critical</option>
                                    </select>
                                </div>
                                <div class="col-md-3 mb-2">
                                    <label for="assigned_to" class="form-label">Assigned To</label>
                                    <select name="assigned_to" id="assigned_to" class="form-control"
                                        onchange="document.getElementById('filtersForm').submit()">
                                        <option value="">All Users</option>
                                        @foreach($users as $user)
                                            <option value="{{ $user->id }}" {{ request('assigned_to') == $user->id ? 'selected' : '' }}>{{ $user->name }}</option>
                                        @endforeach
                                    </select>
                                </div>
                                <div class="col-md-3 mb-2">
                                    <label for="created_from" class="form-label">Created From</label>
                                    <input type="date" name="created_from" id="created_from" class="form-control"
                                        value="{{ request('created_from') }}"
                                        onchange="document.getElementById('filtersForm').submit()">
                                </div>
                                <div class="col-md-3 mb-2">
                                    <label for="created_to" class="form-label">Created To</label>
                                    <input type="date" name="created_to" id="created_to" class="form-control"
                                        value="{{ request('created_to') }}"
                                        onchange="document.getElementById('filtersForm').submit()">
                                </div>
                                <div class="col-md-3 mb-2 d-flex align-items-end">
                                    <div class="custom-control custom-checkbox mb-2">
                                        <input type="checkbox" class="custom-control-input" id="sla_breached"
                                            name="sla_breached" value="1" {{ request('sla_breached') ? 'checked' : '' }}
                                            onchange="document.getElementById('filtersForm').submit()">
                                        <label class="custom-control-label" for="sla_breached">Show SLA Breached
                                            Only</label>
                                    </div>
                                </div>
                            </div>
                            <br>
                            <div class="row">
                                <div class="col-md-12 text-right">
                                    <a href="{{ route('horeca.service-requests.index') }}" class="btn btn-primary">Clear
                                        Filters</a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </form>

            <div class="table-responsive">
                <table class="table mt-3 table-striped table-hover text-nowrap" id="srTable">
                    <thead class="bg-light">
                        <tr>
                            <th scope="col" class="id-index">SR ID</th>
                            <th scope="col" class="title-index">Title</th>
                            <th scope="col" class="category-index">Category</th>
                            <th scope="col" class="outlet-index">Outlet</th>
                            <th scope="col" class="creator-index">Created By</th>
                            <th scope="col" class="assignee-index">Assigned To</th>
                            <th scope="col" class="priority-index">Priority</th>
                            <th scope="col" class="status-index">Status</th>
                            <th scope="col" class="sla-index">SLA Due</th>
                            <th scope="col" class="date-index">Created Date</th>
                            <th scope="col" class="action-index">Actions</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse($serviceRequests as $sr)
                            @php
                                $isSlaBreached = $sr->sla_due_date < now() && !in_array($sr->status, ['resolved', 'closed', 'cancelled']);
                                $isHighPriority = in_array($sr->priority, ['high', 'critical']);
                            @endphp
                            <tr class="{{ $isSlaBreached ? 'sla-breached' : '' }} {{ $isHighPriority ? 'fw-bold' : '' }}">
                                <td class="id-index">{{ $sr->sr_number }}</td>
                                <td class="title-index">
                                    <a href="{{ route('horeca.service-requests.show', $sr->id) }}"
                                        class="text-primary">{{ $sr->title }}</a>
                                </td>
                                <td class="category-index">
                                    <span class="badge bg-soft-info text-info">{{ $sr->category->name }}</span>
                                </td>
                                <td class="outlet-index">
                                    <a href="{{ route('horeca.outlets.edit', $sr->outlet_id) }}">{{ $sr->outlet->name }}</a>
                                </td>
                                <td class="creator-index">
                                    <div class="d-flex align-items-center">
                                        <div class="avatar-xs mr-1">
                                            <span class="avatar-title rounded-circle bg-soft-primary text-primary">
                                                {{ substr($sr->creator->name ?? 'U', 0, 1) }}
                                            </span>
                                        </div>
                                        <span>{{ $sr->creator->name ?? 'System' }}</span>
                                    </div>
                                </td>
                                <td class="assignee-index">
                                    <div class="d-flex align-items-center">
                                        @if($sr->assignee)
                                            <div class="avatar-xs mr-1">
                                                <span class="avatar-title rounded-circle bg-soft-success text-success">
                                                    {{ substr($sr->assignee->name, 0, 1) }}
                                                </span>
                                            </div>
                                            <span>{{ $sr->assignee->name }}</span>
                                        @else
                                            <span class="text-muted">Unassigned</span>
                                        @endif
                                    </div>
                                </td>
                                <td class="priority-index">
                                    @php
                                        $priorityClass = [
                                            'low' => 'bg-soft-success text-success',
                                            'medium' => 'bg-soft-info text-info',
                                            'high' => 'bg-soft-warning text-warning',
                                            'critical' => 'bg-soft-danger text-danger'
                                        ][$sr->priority] ?? 'bg-secondary';
                                    @endphp
                                    <span class="badge {{ $priorityClass }}">{{ ucfirst($sr->priority) }}</span>
                                </td>
                                <td class="status-index">
                                    @php
                                        $statusClass = [
                                            'open' => 'badge-blue',
                                            'in_progress' => 'badge-info',
                                            'approved' => 'badge-success',
                                            'rejected' => 'badge-danger',
                                            'resolved' => 'badge-success',
                                            'closed' => 'badge-secondary',
                                            'cancelled' => 'badge-danger'
                                        ][$sr->status] ?? 'badge-secondary';
                                    @endphp
                                    <span
                                        class="badge {{ $statusClass }} badge-same-width">{{ ucfirst(str_replace('_', ' ', $sr->status)) }}</span>
                                </td>
                                <td class="sla-index">
                                    <span class="{{ $isSlaBreached ? 'text-danger' : '' }}">
                                        {{ $sr->sla_due_date->format('Y-m-d H:i') }}
                                        @if(!$sr->resolved_date && !$sr->closed_date)
                                            <br><small>({{ $sr->sla_due_date->diffForHumans() }})</small>
                                        @endif
                                    </span>
                                </td>
                                <td class="date-index">
                                    {{ $sr->created_at->format('Y-m-d') }}
                                </td>
                                <td class="action-index">
                                    <div class="d-inline-flex table-action-btns">
                                        <a href="{{ route('horeca.service-requests.show', $sr->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>

                                        @can('HoReCa Service Requests update')
                                            <a href="{{ route('horeca.service-requests.edit', $sr->id) }}" title="Edit"
                                                class="ms-1">
                                                <i
                                                    class="fa-solid fa-pencil rounded-5 p-1 d-inline-flex align-items-center justify-content-center action-btn theme-green"></i>
                                            </a>
                                        @endcan
                                    </div>
                                </td>
                            </tr>
                        @empty
                            <tr>
                                <td colspan="11" class="text-center py-4">
                                    <div class="text-muted">
                                        <i class="fa-solid fa-tools fa-3x mb-3"></i>
                                        <p>No service requests found matching your criteria.</p>
                                    </div>
                                </td>
                            </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>

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

@endsection

@push('js')
    <script>
        $(document).ready(function () {


            // Column Visibility
            $('.columnCheckbox').on('change', function () {
                var column = $(this).data('column');
                $(`.${column}-index`).toggle(this.checked);
            });

            // Ensure column visibility state is applied on page load
            $('.columnCheckbox').each(function () {
                var column = $(this).data('column');
                var isChecked = $(this).is(':checked');
                $(`.${column}-index`).toggle(isChecked);
            });
        });
    </script>
    <style>
        .avatar-xs {
            height: 1.5rem;
            width: 1.5rem;
        }

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

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

        .bg-soft-success {
            background-color: rgba(26, 188, 156, 0.15);
        }

        .bg-soft-info {
            background-color: rgba(52, 152, 219, 0.15);
        }

        .bg-soft-warning {
            background-color: rgba(241, 196, 15, 0.15);
        }

        .bg-soft-danger {
            background-color: rgba(231, 76, 60, 0.15);
        }

        .theme-green {
            color: #28a745;
        }

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

        .theme-red {
            color: #f06548;
        }

        .theme-warning {
            color: #f1c40f;
        }

        .sla-breached {
            border-left: 4px solid #f06548 !important;
        }

        .badge-same-width {
            width: 85px;
            display: inline-block;
            text-align: center;
        }

        .rounded-border {
            border-radius: 12px;
            border: 1px solid #e0e0e0;
        }

        .badge-blue {
            background-color: #4489e4;
            color: white;
        }

        /* Standardized Form Styles for Filters */
        .form-label {
            color: #8D99AE;
            font-weight: 500;
            font-size: 0.85rem;
            margin-bottom: 8px;
            display: block;
        }

        .form-control {
            border: none !important;
            border-bottom: 1px solid #E5E9F2 !important;
            border-radius: 0 !important;
            padding: 0.4rem 0 !important;
            font-size: 0.95rem !important;
            background: transparent !important;
            color: #4E5E7A !important;
            box-shadow: none !important;
        }

        .form-control:focus {
            border-bottom-color: #FABB1E !important;
        }
    </style>
@endpush