@extends('layout.app')

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

        #reportTable thead th {
            position: sticky;
            top: 0;
            background-color: #343a40 !important;
            color: #fff !important;
            z-index: 10;
            border-bottom: 2px solid #454d55;
        }
    </style>
@endsection

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

        <div class="card mb-3">
            <div class="card-header">
                <h4 class="card-title">{{ $page_title }}</h4>
            </div>
            <div class="card-body">
                <form action="{{ route('confirm-line-shift') }}" method="GET">
                    <div class="row">

                        <div class="col-md-3">
                            <div class="form-group">
                                <label>From Date</label>
                                <input type="date" name="from_date" class="form-control"
                                    value="{{ request('from_date') }}">
                            </div>
                        </div>

                        <div class="col-md-3">
                            <div class="form-group">
                                <label>To Date</label>
                                <input type="date" name="to_date" class="form-control"
                                    value="{{ request('to_date') }}">
                            </div>
                        </div>

                        <div class="col-md-3">
                            <div class="form-group">
                                <label>Source</label>
                                <select name="source_id" class="form-control select2">
                                    <option value="">All Sources</option>
                                    @foreach ($clientSources as $source)
                                        <option value="{{ $source->id }}"
                                            {{ request('source_id') == $source->id ? 'selected' : '' }}>
                                            {{ $source->name }}
                                        </option>
                                    @endforeach
                                </select>
                            </div>
                        </div>

                        <div class="col-md-3">
                            <div class="form-group">
                                <label>Marketing Done User</label>
                                <select name="marketing_done_by" class="form-control select2">
                                    <option value="">All Users</option>
                                    @foreach ($marketingDoneUsers as $user)
                                        <option value="{{ $user->id }}"
                                            {{ request('marketing_done_by') == $user->id ? 'selected' : '' }}>
                                            {{ $user->name }}
                                        </option>
                                    @endforeach
                                </select>
                            </div>
                        </div>

                        <div class="col-md-3">
                            <div class="form-group">
                                <label>Status</label>
                                <select name="status" class="form-control select2">
                                    <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="col-md-12">
                            <div class="form-group">
                                <a href="{{ route('confirm-line-shift') }}"
                                    class="btn btn-secondary btn-sm float-right ml-1">Reset</a>
                                <button type="submit" class="btn btn-primary btn-sm float-right">Search</button>
                            </div>
                        </div>

                    </div>
                </form>
            </div>
        </div>

        <div class="card">
            <div class="card-header">
                <div class="row">
                    <div class="col-6">
                        <h4 class="card-title m-0">Confirmed Line Requests</h4>
                    </div>
                    <div class="col-6 text-right">
                        <span class="badge badge-success">Total: {{ $lists->count() }}</span>
                    </div>
                </div>
            </div>
            <div class="card-body p-0">
                <div class="table-responsive">
                    <table class="table table-bordered table-hover mb-0" id="reportTable">
                        <thead class="thead-dark">
                            <tr>
                                <th>#</th>
                                <th>ID</th>
                                <th>Confirmed At</th>
                                <th>Name</th>
                                <th>Phone</th>
                                <th>POP</th>
                                <th>Package</th>
                                <th>Source</th>
                                <th>Confirm Activation Date</th>
                                <th>Marketing Done By</th>
                                <th>Created By</th>
                            </tr>
                        </thead>
                        <tbody>
                            @forelse ($lists as $i => $list)
                                <tr>
                                    <td>{{ $i + 1 }}</td>
                                    <td>
                                        {{ $list->id }}
                                        
                                    </td>
                                    <td>
                                        @php
                                            $confirmedAt = optional($list->confirmRequestLog)->created_at;
                                        @endphp
                                        {{ $confirmedAt ? $confirmedAt->format('d M Y H:i') : 'N/A' }}
                                    </td>
                                    <td>{{ $list->name ?? 'N/A' }}</td>
                                    <td>{{ $list->phone ?? 'N/A' }}</td>
                                    <td>{{ $list->pop->popname ?? 'N/A' }}</td>
                                    <td>{{ $list->package->package_name ?? 'N/A' }}</td>
                                    <td>{{ $list->ClientSource->name ?? 'N/A' }}</td>
                                    <td>{{ $list->confirm_activation_date ?? 'N/A' }}</td>
                                    <td>
                                        {{ $list->marketingDoneUser->name ?? 'N/A' }}
                                        @if (!empty($list->marketingDoneUser->name) && !empty($list->marketingDoneUser->mobile_number))
                                            <small>({{ $list->marketingDoneUser->mobile_number }})</small>
                                        @endif
                                    </td>
                                    <td>{{ $list->user->name ?? 'WebSite' }}</td>
                                </tr>
                            @empty
                                <tr>
                                    <td colspan="11" class="text-center text-muted py-4">No confirmed line requests found.</td>
                                </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
            </div>
        </div>

    </div>
@endsection

@section('ajax')
    <script>
        $(function() {
            if ($.fn.DataTable && $('#reportTable').length) {
                if ($.fn.DataTable.isDataTable('#reportTable')) {
                    $('#reportTable').DataTable().destroy();
                }
                $('#reportTable').DataTable({
                    pageLength: 100,
                    order: [[0, 'asc']],
                    scrollY: '500px',
                    scrollCollapse: true,
                    paging: true,
                });
            }
        });
    </script>
@endsection