@extends('layout.app')

@push('styles')
    <style>
        .table-responsive {
            max-height: calc(100vh - 320px);
            overflow-y: auto;
            position: relative;
        }

        #shiftTable thead th {
            position: sticky;
            top: 0;
            background-color: #343a40 !important;
            z-index: 10;
            color: #fff !important;
        }
    </style>
@endpush

@section('content')
    <div class="container-fluid">

        {{-- Filter --}}
        <div class="card mb-3">
            <div class="card-header">
                <h4 class="card-title mb-0">{{ $page_title }}</h4>
            </div>
            <div class="card-body">
                <form action="{{ route('quick-request-shift-report') }}" method="GET">
                    <div class="row align-items-end">
                        <div class="col-md-3">
                            <div class="form-group">
                                <label>From Date</label>
                                <input type="date" name="from_date" class="form-control form-control-sm"
                                    value="{{ \Carbon\Carbon::parse($from)->format('Y-m-d') }}">
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="form-group">
                                <label>To Date</label>
                                <input type="date" name="to_date" class="form-control form-control-sm"
                                    value="{{ \Carbon\Carbon::parse($to)->format('Y-m-d') }}">
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="form-group mb-0">
                                <button type="submit" class="btn btn-primary btn-sm">
                                    <i class="fa fa-search"></i> Search
                                </button>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
        </div>

        {{-- Summary --}}
        <div class="card mb-3">
            <div class="card-body d-flex justify-content-between align-items-center">
                <h5 class="mb-0">Total shifted to New Line Request</h5>
                <span class="badge badge-success" style="font-size: 1rem;">{{ $total }}</span>
            </div>
        </div>

        {{-- Detailed list --}}
        <div class="card">
            <div class="card-body">
                <div class="table-responsive">
                    <table class="table table-bordered table-striped table-sm" id="shiftTable">
                        <thead>
                            <tr>
                                <th>#</th>
                                <th>Name</th>
                                <th>Phone</th>
                                <th>Source</th>
                                <th>Shifted At</th>
                                <th>Shifted By</th>
                            </tr>
                        </thead>
                        <tbody>
                            @forelse ($shiftedRequests as $key => $list)
                                <tr>
                                    <td>{{ $key + 1 }}</td>
                                    <td>{{ $list->name ?? 'N/A' }}</td>
                                    <td>{{ $list->phone ?? 'N/A' }}</td>
                                    <td>{{ optional($list->ClientSource)->name ?? 'N/A' }}</td>
                                    <td>{{ \Carbon\Carbon::parse($list->shifted_to_new_line_at)->format('d-M-Y h:i A') }}</td>
                                    <td>{{ $list->shifted_to_new_line_by ? user_name($list->shifted_to_new_line_by) : 'N/A' }}</td>
                                </tr>
                            @empty
                                <tr>
                                    <td colspan="6" class="text-center">No shifted requests found for this date range.</td>
                                </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
@endsection