@extends('layouts.admin')

@section('title', 'Delivery Partner Management - Orange Groceries Admin')
@section('header_title', 'Delivery Partner Management')

@section('content')
<div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
    
    <div class="bg-white rounded-3xl p-6 border border-slate-200/80 shadow-sm h-fit space-y-4">
        <h3 class="font-extrabold text-slate-900 text-base">Add Delivery Partner</h3>
        
        <form action="{{ route('admin.delivery.partners.store') }}" method="POST" class="space-y-4">
            @csrf
            <div>
                <label class="block text-xs font-bold text-slate-700 uppercase tracking-wider mb-1">Partner Name *</label>
                <input type="text" name="name" required placeholder="Ramesh Kumar" class="w-full px-4 py-2.5 rounded-xl border border-slate-200 text-xs">
            </div>

            <div>
                <label class="block text-xs font-bold text-slate-700 uppercase tracking-wider mb-1">Mobile Number *</label>
                <input type="text" name="phone" required placeholder="9876543210" class="w-full px-4 py-2.5 rounded-xl border border-slate-200 text-xs">
            </div>

            <div>
                <label class="block text-xs font-bold text-slate-700 uppercase tracking-wider mb-1">Email Address *</label>
                <input type="email" name="email" required placeholder="delivery@grocery.com" class="w-full px-4 py-2.5 rounded-xl border border-slate-200 text-xs">
            </div>

            <div>
                <label class="block text-xs font-bold text-slate-700 uppercase tracking-wider mb-1">Password *</label>
                <input type="password" name="password" required value="password" class="w-full px-4 py-2.5 rounded-xl border border-slate-200 text-xs">
            </div>

            <div>
                <label class="block text-xs font-bold text-slate-700 uppercase tracking-wider mb-1">Vehicle Details</label>
                <input type="text" name="vehicle_details" placeholder="e.g. Honda Activa 6G" class="w-full px-4 py-2.5 rounded-xl border border-slate-200 text-xs">
            </div>

            <div>
                <label class="block text-xs font-bold text-slate-700 uppercase tracking-wider mb-1">Vehicle Number</label>
                <input type="text" name="vehicle_number" placeholder="e.g. OD-02-AB-1234" class="w-full px-4 py-2.5 rounded-xl border border-slate-200 text-xs uppercase">
            </div>

            <div>
                <label class="block text-xs font-bold text-slate-700 uppercase tracking-wider mb-1">ID Proof Ref</label>
                <input type="text" name="id_proof" placeholder="e.g. Aadhaar 9876-5432-1098" class="w-full px-4 py-2.5 rounded-xl border border-slate-200 text-xs">
            </div>

            <button type="submit" class="w-full bg-brand-600 hover:bg-brand-700 text-white font-extrabold text-xs py-3 rounded-xl shadow">Add Partner Account</button>
        </form>
    </div>

    <div class="lg:col-span-2 bg-white rounded-3xl p-6 border border-slate-200/80 shadow-sm space-y-4">
        <h3 class="font-extrabold text-slate-900 text-base">Delivery Fleet Partners</h3>

        <div class="overflow-x-auto">
            <table class="w-full text-left text-xs">
                <thead>
                    <tr class="text-slate-400 uppercase font-extrabold border-b border-slate-100">
                        <th class="pb-3">Partner Name</th>
                        <th class="pb-3">Phone & Email</th>
                        <th class="pb-3">Vehicle Details</th>
                        <th class="pb-3">Status</th>
                        <th class="pb-3 text-right">Actions</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-slate-100 font-medium text-slate-800">
                    @foreach($partners as $partner)
                        <tr>
                            <td class="py-3 font-bold text-slate-900">{{ $partner->name }}</td>
                            <td class="py-3">
                                <div>{{ $partner->phone }}</div>
                                <div class="text-[10px] text-slate-400">{{ $partner->email }}</div>
                            </td>
                            <td class="py-3">
                                <div>{{ $partner->vehicle_details ?? 'N/A' }}</div>
                                <div class="text-[10px] font-mono text-slate-500 uppercase">{{ $partner->vehicle_number }}</div>
                            </td>
                            <td class="py-3">
                                @if(($partner->status ?? 'active') === 'active')
                                    <span class="px-2.5 py-0.5 rounded-full font-bold text-[10px] bg-emerald-100 text-emerald-800">Active Fleet</span>
                                @else
                                    <span class="px-2.5 py-0.5 rounded-full font-bold text-[10px] bg-rose-100 text-rose-800">Inactive</span>
                                @endif
                            </td>
                            <td class="py-3 text-right">
                                <div class="flex items-center justify-end space-x-3">
                                    <button type="button" 
                                        onclick="openEditModal({{ json_encode($partner) }})" 
                                        class="text-brand-600 font-extrabold hover:underline">
                                        Edit
                                    </button>
                                    <form action="{{ route('admin.delivery.partners.delete', $partner->id) }}" method="POST" class="inline">
                                        @csrf
                                        <button type="submit" onclick="return confirm('Remove partner?')" class="text-rose-600 font-bold hover:underline">Remove</button>
                                    </form>
                                </div>
                            </td>
                        </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
        {{ $partners->links() }}
    </div>
</div>

<!-- Edit Delivery Partner Modal -->
<div id="editPartnerModal" class="fixed inset-0 bg-slate-900/60 backdrop-blur-sm z-50 hidden items-center justify-center p-4 overflow-y-auto">
    <div class="bg-white rounded-3xl p-6 border border-slate-200/80 shadow-2xl w-full max-w-lg space-y-4 my-8">
        <div class="flex items-center justify-between border-b border-slate-100 pb-3">
            <h3 class="font-extrabold text-slate-900 text-base">Edit Delivery Partner</h3>
            <button type="button" onclick="closeEditModal()" class="text-slate-400 hover:text-slate-600 font-bold">
                <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/></svg>
            </button>
        </div>

        <form id="editPartnerForm" method="POST" class="space-y-4">
            @csrf
            <input type="hidden" id="edit_partner_id" name="id">

            <div>
                <label class="block text-xs font-bold text-slate-700 uppercase tracking-wider mb-1">Partner Name *</label>
                <input type="text" id="edit_name" name="name" required class="w-full px-4 py-2.5 rounded-xl border border-slate-200 text-xs">
            </div>

            <div class="grid grid-cols-2 gap-4">
                <div>
                    <label class="block text-xs font-bold text-slate-700 uppercase tracking-wider mb-1">Mobile Number *</label>
                    <input type="text" id="edit_phone" name="phone" required class="w-full px-4 py-2.5 rounded-xl border border-slate-200 text-xs">
                </div>

                <div>
                    <label class="block text-xs font-bold text-slate-700 uppercase tracking-wider mb-1">Email Address *</label>
                    <input type="email" id="edit_email" name="email" required class="w-full px-4 py-2.5 rounded-xl border border-slate-200 text-xs">
                </div>
            </div>

            <div>
                <label class="block text-xs font-bold text-slate-700 uppercase tracking-wider mb-1">New Password (Leave blank to keep current)</label>
                <input type="password" name="password" placeholder="••••••••" class="w-full px-4 py-2.5 rounded-xl border border-slate-200 text-xs">
            </div>

            <div class="grid grid-cols-2 gap-4">
                <div>
                    <label class="block text-xs font-bold text-slate-700 uppercase tracking-wider mb-1">Vehicle Details</label>
                    <input type="text" id="edit_vehicle_details" name="vehicle_details" placeholder="e.g. Honda Activa 6G" class="w-full px-4 py-2.5 rounded-xl border border-slate-200 text-xs">
                </div>

                <div>
                    <label class="block text-xs font-bold text-slate-700 uppercase tracking-wider mb-1">Vehicle Number</label>
                    <input type="text" id="edit_vehicle_number" name="vehicle_number" placeholder="e.g. OD-02-AB-1234" class="w-full px-4 py-2.5 rounded-xl border border-slate-200 text-xs uppercase">
                </div>
            </div>

            <div class="grid grid-cols-2 gap-4">
                <div>
                    <label class="block text-xs font-bold text-slate-700 uppercase tracking-wider mb-1">ID Proof Ref</label>
                    <input type="text" id="edit_id_proof" name="id_proof" placeholder="e.g. Aadhaar 9876-5432-1098" class="w-full px-4 py-2.5 rounded-xl border border-slate-200 text-xs">
                </div>

                <div>
                    <label class="block text-xs font-bold text-slate-700 uppercase tracking-wider mb-1">Account Status</label>
                    <select id="edit_status" name="status" class="w-full px-4 py-2.5 rounded-xl border border-slate-200 text-xs">
                        <option value="active">Active Fleet</option>
                        <option value="inactive">Inactive / Suspended</option>
                    </select>
                </div>
            </div>

            <div class="flex items-center justify-end space-x-3 pt-2">
                <button type="button" onclick="closeEditModal()" class="px-5 py-2.5 rounded-xl border border-slate-200 font-bold text-xs text-slate-600 hover:bg-slate-50">Cancel</button>
                <button type="submit" class="px-5 py-2.5 rounded-xl bg-brand-600 hover:bg-brand-700 text-white font-extrabold text-xs shadow">Update Partner</button>
            </div>
        </form>
    </div>
</div>

<script>
function openEditModal(partner) {
    document.getElementById('edit_partner_id').value = partner.id;
    document.getElementById('edit_name').value = partner.name || '';
    document.getElementById('edit_phone').value = partner.phone || '';
    document.getElementById('edit_email').value = partner.email || '';
    document.getElementById('edit_vehicle_details').value = partner.vehicle_details || '';
    document.getElementById('edit_vehicle_number').value = partner.vehicle_number || '';
    document.getElementById('edit_id_proof').value = partner.id_proof || '';
    document.getElementById('edit_status').value = partner.status || 'active';

    const updateUrl = "{{ url('admin/delivery/partners/update') }}/" + partner.id;
    document.getElementById('editPartnerForm').action = updateUrl;

    const modal = document.getElementById('editPartnerModal');
    modal.classList.remove('hidden');
    modal.classList.add('flex');
}

function closeEditModal() {
    const modal = document.getElementById('editPartnerModal');
    modal.classList.add('hidden');
    modal.classList.remove('flex');
}
</script>
@endsection