@extends('layouts.app')

@section('content')
<div class="container mt-5">
    <div class="card shadow-sm border-0">
        <div class="card-header bg-success text-white d-flex justify-content-between align-items-center">
            <h4 class="mb-0">✏️ Edit MP Coordinator</h4>
            <a href="{{ route('mp_coordinators.index') }}" class="btn btn-light btn-sm fw-bold">
                ← Back to List
            </a>
        </div>

        <div class="card-body">
            {{-- Validation Errors --}}
            @if ($errors->any())
                <div class="alert alert-danger alert-dismissible fade show">
                    <ul class="mb-0">
                        @foreach ($errors->all() as $error)
                            <li>{{ $error }}</li>
                        @endforeach
                    </ul>
                    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                </div>
            @endif

            {{-- Success Message --}}
            @if(session('success'))
                <div class="alert alert-success alert-dismissible fade show" role="alert">
                    {{ session('success') }}
                    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                </div>
            @endif

            <form action="{{ route('mp_coordinators.update', $mpCoordinator->id) }}" method="POST">
                @csrf
                @method('PUT')

                {{-- Name --}}
                <div class="mb-3">
                    <label for="name" class="form-label">Name <span class="text-danger">*</span></label>
                    <input type="text" 
                           name="name" 
                           id="name" 
                           class="form-control" 
                           value="{{ old('name', $mpCoordinator->name) }}" 
                           required>
                </div>

                {{-- Email --}}
                <div class="mb-3">
                    <label for="email" class="form-label">Email</label>
                    <input type="email" 
                           name="email" 
                           id="email" 
                           class="form-control" 
                           value="{{ old('email', $mpCoordinator->email) }}">
                </div>

                {{-- Phone --}}
                <div class="mb-3">
                    <label for="phone" class="form-label">Phone</label>
                    <input type="text" 
                           name="phone" 
                           id="phone" 
                           class="form-control" 
                           value="{{ old('phone', $mpCoordinator->phone) }}">
                </div>

                {{-- ID Number --}}
                <div class="mb-3">
                    <label for="id_number" class="form-label">ID Number</label>
                    <input type="text"
                           name="id_number"
                           id="id_number"
                           class="form-control"
                           value="{{ old('id_number', $mpCoordinator->id_number) }}">
                </div>

                {{-- Center --}}
                <div class="mb-3">
                    <label for="center_id" class="form-label">Center <span class="text-danger">*</span></label>
                    <select name="center_id" id="center_id" class="form-control" required>
                        <option value="">-- Select Center --</option>
                        @foreach(\App\Models\Center::all() as $center)
                            <option value="{{ $center->id }}" 
                                {{ old('center_id', $mpCoordinator->center_id) == $center->id ? 'selected' : '' }}>
                                {{ $center->name }}
                            </option>
                        @endforeach
                    </select>
                </div>

                {{-- Buttons --}}
                <div class="d-flex justify-content-between">
                    <a href="{{ route('mp_coordinators.index') }}" class="btn btn-secondary">Back</a>
                    <button type="submit" class="btn btn-success">Update Coordinator</button>
                </div>
            </form>
        </div>
    </div>
</div>

{{-- Optional Custom Styling --}}
<style>
    .card-header {
        background: linear-gradient(90deg, #198754, #157347);
    }
</style>
@endsection