@extends('layouts.app')

@section('content')
<div class="container-fluid py-4">
    <style>
        body {
            background-color: #f4fdf6;
        }
        .card, .card-body {
            border-radius: 12px;
        }
        .table thead {
            background-color: #388e3c;
            color: #fff;
        }
        tbody tr:hover {
            background-color: #e8f5e9;
        }
        .btn-success, .btn-outline-success {
            transition: all 0.3s;
        }
        .btn-success:hover {
            background-color: #256a28;
            border-color: #256a28;
        }
    </style>

    <div class="row">
        <main class="col-md-12 px-3">

            {{-- Page Header --}}
            <div class="d-flex justify-content-between align-items-center mb-4 flex-wrap">
                <h2 class="border-start border-4 ps-3 border-success text-success mb-0">
                    🎯 MP Coordinators
                </h2>
                <div class="d-flex gap-2 flex-wrap">
                    <a href="{{ route('coordinator.dashboard') }}" class="btn btn-outline-success">
                        <i class="bi bi-arrow-left"></i> Back to Dashboard
                    </a>
                    <a href="{{ route('coordinator.mp_coordinators.export') }}" class="btn btn-success">
                        <i class="bi bi-download"></i> Export to CSV
                    </a>
                </div>
            </div>

            {{-- Summary Card --}}
            <div class="row mb-4">
                <div class="col-md-3 mb-3">
                    <div class="card shadow-sm text-center">
                        <div class="card-body">
                            <h5>Total MP Coordinators</h5>
                            <h3 class="text-success">{{ $totalMpCoordinators }}</h3>
                        </div>
                    </div>
                </div>
            </div>

            {{-- Filters --}}
            <div class="card mb-4 shadow-sm">
                <div class="card-body">
                    <form action="{{ route('coordinator.mp_coordinators') }}" method="GET" class="row g-3 align-items-end">
                        <div class="col-md-3">
                            <label class="form-label">Name</label>
                            <input type="text" name="name" class="form-control" placeholder="Search by name" value="{{ request('name') }}">
                        </div>
                        <div class="col-md-2">
                            <label class="form-label">County</label>
                            <select name="county" id="county_id" class="form-select">
                                <option value="">All Counties</option>
                                @foreach($counties as $county)
                                    <option value="{{ $county->id }}" {{ request('county') == $county->id ? 'selected' : '' }}>
                                        {{ $county->name }}
                                    </option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col-md-2">
                            <label class="form-label">Sub-County</label>
                            <select name="sub_county" id="sub_county_id" class="form-select">
                                <option value="">All Sub-Counties</option>
                                @foreach($subCounties as $sub)
                                    <option value="{{ $sub->id }}" {{ request('sub_county') == $sub->id ? 'selected' : '' }}>
                                        {{ $sub->name }}
                                    </option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col-md-2">
                            <label class="form-label">Center</label>
                            <select name="center" id="center_id" class="form-select">
                                <option value="">All Centers</option>
                                @foreach($centers as $center)
                                    <option value="{{ $center->id }}" {{ request('center') == $center->id ? 'selected' : '' }}>
                                        {{ $center->name }}
                                    </option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col-md-1 d-grid">
                            <button type="submit" class="btn btn-success mt-2">
                                <i class="bi bi-funnel"></i> Filter
                            </button>
                        </div>
                    </form>
                </div>
            </div>

            {{-- MP Coordinators Table --}}
            @if($mpCoordinators->isEmpty())
                <div class="alert alert-info shadow-sm">
                    No MP coordinators found.
                </div>
            @else
                <div class="card shadow-sm">
                    <div class="card-body p-0">
                        <div class="table-responsive">
                            <table id="mpCoordinatorsTable" class="table table-hover table-bordered mb-0">
                                <thead class="table-success">
                                    <tr>
                                        <th>#</th>
                                        <th>Name</th>
                                        <th>ID Number</th>
                                        <th>Email</th>
                                        <th>Phone</th>
                                        <th>Sub-County</th>
                                        <th>Center</th>
                                        <th>Joined At</th>
                                        <th>Last Updated</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach($mpCoordinators as $mp)
                                        <tr>
                                            <td>{{ $loop->iteration }}</td>
                                            <td>{{ $mp->name }}</td>
                                            <td>{{ $mp->id_number }}</td>
                                            <td>{{ $mp->email ?? '-' }}</td>
                                            <td>{{ $mp->phone ?? '-' }}</td>
                                            <td>{{ $mp->subCounty?->name ?? '-' }}</td>
                                            <td>{{ $mp->center?->name ?? '-' }}</td>
                                            <td>{{ $mp->created_at->format('d M Y') }}</td>
                                            <td>{{ $mp->updated_at->format('d M Y') }}</td>
                                        </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            @endif

            {{-- Footer --}}
            <div class="text-center mt-4 text-muted">
                NYOTA System © {{ date('Y') }}
            </div>

        </main>
    </div>
</div>
@endsection

@section('scripts')
<script>
    $(document).ready(function() {
        $('#mpCoordinatorsTable').DataTable({
            "pageLength": 25,
            "lengthChange": true,
            "ordering": true,
            "order": [[ 1, "asc" ]]
        });

        // Dynamic dropdowns
        $('#county_id').change(function(){
            let countyId = $(this).val();
            $('#sub_county_id').html('<option value="">All Sub-Counties</option>');
            $('#center_id').html('<option value="">All Centers</option>');

            if(countyId){
                fetch(`/trainer-assignments/subcounties/${countyId}`)
                .then(res => res.json())
                .then(data => {
                    data.forEach(sub => {
                        $('#sub_county_id').append(`<option value="${sub.id}">${sub.name}</option>`);
                    });
                });
            }
        });

        $('#sub_county_id').change(function(){
            let subId = $(this).val();
            $('#center_id').html('<option value="">All Centers</option>');

            if(subId){
                fetch(`/trainer-assignments/centers/${subId}`)
                .then(res => res.json())
                .then(data => {
                    data.forEach(center => {
                        $('#center_id').append(`<option value="${center.id}">${center.name}</option>`);
                    });
                });
            }
        });
    });
</script>
@endsection