@extends('layouts.layout')

@section('content')
    {{-- Leaflet CSS --}}
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
    <link rel="stylesheet" href="https://unpkg.com/leaflet-control-geocoder/dist/Control.Geocoder.css" />

    <style>
        .map-picker {
            height: 350px;
            width: 100%;
            border-radius: 8px;
            border: 1px solid #dee2e6;
            z-index: 0;
        }

        .map-picker-modal {
            height: 280px;
            width: 100%;
            border-radius: 8px;
            border: 1px solid #dee2e6;
            z-index: 0;
        }

        .leaflet-control-geocoder {
            border-radius: 6px !important;
        }
    </style>

    <div id="main">
        <header class="mb-3">
            <a href="#" class="burger-btn d-block d-xl-none">
                <i class="bi bi-justify fs-3"></i>
            </a>
        </header>

        <div class="page-heading">
            <div class="page-title">
                <div class="row">
                    <div class="col-12 col-md-6 order-md-1 order-last">
                        <h3>Contact Us Management</h3>
                        <p class="text-subtitle text-muted">Manage and view contact information</p>
                    </div>
                    <div class="col-12 col-md-6 order-md-2 order-first">
                        <nav aria-label="breadcrumb" class="breadcrumb-header float-start float-lg-end">
                            <ol class="breadcrumb">
                                <li class="breadcrumb-item"><a href="{{ url('/') }}">Dashboard</a></li>
                                <li class="breadcrumb-item active" aria-current="page">Pages -> Contact Us</li>
                            </ol>
                        </nav>
                    </div>
                </div>
            </div>

            {{-- Add Contact Form --}}
            <section id="basic-vertical-layouts">
                <div class="row match-height">
                    <div class="col-12">
                        <div class="card">
                            <div class="card-header">
                                <h4 class="card-title">Add New Contact</h4>
                            </div>
                            <div class="card-content">
                                <div class="card-body">
                                    <form class="form form-vertical" action="{{ route('contact.store') }}" method="POST">
                                        @csrf
                                        <div class="form-body">
                                            <div class="row">

                                                <div class="col-12 col-md-6">
                                                    <div class="form-group mb-3">
                                                        <label for="address_line1">Address Line 1 <span
                                                                class="text-danger">*</span></label>
                                                        <div class="input-group">
                                                            <span class="input-group-text"><i
                                                                    class="bi bi-geo-alt"></i></span>
                                                            <input type="text" id="address_line1"
                                                                class="form-control @error('address_line1') is-invalid @enderror"
                                                                name="address_line1" value="{{ old('address_line1') }}"
                                                                placeholder="e.g. Street 51" required>
                                                            @error('address_line1')
                                                                <div class="invalid-feedback">{{ $message }}</div>
                                                            @enderror
                                                        </div>
                                                    </div>
                                                </div>

                                                <div class="col-12 col-md-6">
                                                    <div class="form-group mb-3">
                                                        <label for="address_line2">Address Line 2</label>
                                                        <div class="input-group">
                                                            <span class="input-group-text"><i
                                                                    class="bi bi-geo-alt"></i></span>
                                                            <input type="text" id="address_line2"
                                                                class="form-control @error('address_line2') is-invalid @enderror"
                                                                name="address_line2" value="{{ old('address_line2') }}"
                                                                placeholder="e.g. Sangkat Boeung Keng Kang">
                                                            @error('address_line2')
                                                                <div class="invalid-feedback">{{ $message }}</div>
                                                            @enderror
                                                        </div>
                                                    </div>
                                                </div>

                                                <div class="col-12 col-md-6">
                                                    <div class="form-group mb-3">
                                                        <label for="city">City <span
                                                                class="text-danger">*</span></label>
                                                        <div class="input-group">
                                                            <span class="input-group-text"><i
                                                                    class="bi bi-building"></i></span>
                                                            <input type="text" id="city"
                                                                class="form-control @error('city') is-invalid @enderror"
                                                                name="city" value="{{ old('city') }}"
                                                                placeholder="e.g. Phnom Penh" required>
                                                            @error('city')
                                                                <div class="invalid-feedback">{{ $message }}</div>
                                                            @enderror
                                                        </div>
                                                    </div>
                                                </div>

                                                <div class="col-12 col-md-6">
                                                    <div class="form-group mb-3">
                                                        <label for="state">State / Province</label>
                                                        <div class="input-group">
                                                            <span class="input-group-text"><i class="bi bi-map"></i></span>
                                                            <input type="text" id="state"
                                                                class="form-control @error('state') is-invalid @enderror"
                                                                name="state" value="{{ old('state') }}"
                                                                placeholder="e.g. Phnom Penh">
                                                            @error('state')
                                                                <div class="invalid-feedback">{{ $message }}</div>
                                                            @enderror
                                                        </div>
                                                    </div>
                                                </div>

                                                <div class="col-12 col-md-6">
                                                    <div class="form-group mb-3">
                                                        <label for="postal_code">Postal Code</label>
                                                        <div class="input-group">
                                                            <span class="input-group-text"><i
                                                                    class="bi bi-mailbox"></i></span>
                                                            <input type="text" id="postal_code"
                                                                class="form-control @error('postal_code') is-invalid @enderror"
                                                                name="postal_code" value="{{ old('postal_code') }}"
                                                                placeholder="e.g. 12000">
                                                            @error('postal_code')
                                                                <div class="invalid-feedback">{{ $message }}</div>
                                                            @enderror
                                                        </div>
                                                    </div>
                                                </div>

                                                <div class="col-12 col-md-6">
                                                    <div class="form-group mb-3">
                                                        <label for="country">Country <span
                                                                class="text-danger">*</span></label>
                                                        <div class="input-group">
                                                            <span class="input-group-text"><i
                                                                    class="bi bi-globe"></i></span>
                                                            <input type="text" id="country"
                                                                class="form-control @error('country') is-invalid @enderror"
                                                                name="country" value="{{ old('country') }}"
                                                                placeholder="e.g. Cambodia" required>
                                                            @error('country')
                                                                <div class="invalid-feedback">{{ $message }}</div>
                                                            @enderror
                                                        </div>
                                                    </div>
                                                </div>

                                                {{-- Hotlines --}}
                                                <div class="col-12 col-md-4">
                                                    <div class="form-group mb-3">
                                                        <label for="hotline_primary">Primary Hotline <span
                                                                class="text-danger">*</span></label>
                                                        <div class="input-group">
                                                            <span class="input-group-text"><i
                                                                    class="bi bi-telephone"></i></span>
                                                            <input type="text" id="hotline_primary"
                                                                class="form-control @error('hotline_primary') is-invalid @enderror"
                                                                name="hotline_primary"
                                                                value="{{ old('hotline_primary') }}"
                                                                placeholder="e.g. +855 23 123 456" required>
                                                            @error('hotline_primary')
                                                                <div class="invalid-feedback">{{ $message }}</div>
                                                            @enderror
                                                        </div>
                                                    </div>
                                                </div>

                                                <div class="col-12 col-md-4">
                                                    <div class="form-group mb-3">
                                                        <label for="hotline_secondary">Secondary Hotline</label>
                                                        <div class="input-group">
                                                            <span class="input-group-text"><i
                                                                    class="bi bi-telephone"></i></span>
                                                            <input type="text" id="hotline_secondary"
                                                                class="form-control @error('hotline_secondary') is-invalid @enderror"
                                                                name="hotline_secondary"
                                                                value="{{ old('hotline_secondary') }}"
                                                                placeholder="e.g. +855 12 345 678">
                                                            @error('hotline_secondary')
                                                                <div class="invalid-feedback">{{ $message }}</div>
                                                            @enderror
                                                        </div>
                                                    </div>
                                                </div>

                                                <div class="col-12 col-md-4">
                                                    <div class="form-group mb-3">
                                                        <label for="hotline_third">Third Hotline</label>
                                                        <div class="input-group">
                                                            <span class="input-group-text"><i
                                                                    class="bi bi-telephone"></i></span>
                                                            <input type="text" id="hotline_third"
                                                                class="form-control @error('hotline_third') is-invalid @enderror"
                                                                name="hotline_third" value="{{ old('hotline_third') }}"
                                                                placeholder="e.g. +855 98 765 432">
                                                            @error('hotline_third')
                                                                <div class="invalid-feedback">{{ $message }}</div>
                                                            @enderror
                                                        </div>
                                                    </div>
                                                </div>

                                                <div class="col-12 col-md-6">
                                                    <div class="form-group mb-3">
                                                        <label for="email">Email <span
                                                                class="text-danger">*</span></label>
                                                        <div class="input-group">
                                                            <span class="input-group-text"><i
                                                                    class="bi bi-envelope"></i></span>
                                                            <input type="email" id="email"
                                                                class="form-control @error('email') is-invalid @enderror"
                                                                name="email" value="{{ old('email') }}"
                                                                placeholder="e.g. info@example.com" required>
                                                            @error('email')
                                                                <div class="invalid-feedback">{{ $message }}</div>
                                                            @enderror
                                                        </div>
                                                    </div>
                                                </div>

                                                {{-- ── MAP PICKER (Add Form) ── --}}
                                                <div class="col-12">
                                                    <label class="form-label fw-semibold">
                                                        <i class="bi bi-pin-map me-1 text-primary"></i>
                                                        Pick Location on Map
                                                        <small class="text-muted fw-normal ms-1">— click the map or search
                                                            to set coordinates</small>
                                                    </label>
                                                    <div id="addMap" class="map-picker mb-3"></div>
                                                </div>

                                                <div class="col-12 col-md-4">
                                                    <div class="form-group mb-3">
                                                        <label for="latitude">Latitude</label>
                                                        <div class="input-group">
                                                            <span class="input-group-text"><i
                                                                    class="bi bi-compass"></i></span>
                                                            <input type="text" id="latitude"
                                                                class="form-control @error('latitude') is-invalid @enderror"
                                                                name="latitude" value="{{ old('latitude') }}"
                                                                placeholder="e.g. 11.5564">
                                                            @error('latitude')
                                                                <div class="invalid-feedback">{{ $message }}</div>
                                                            @enderror
                                                        </div>
                                                    </div>
                                                </div>

                                                <div class="col-12 col-md-4">
                                                    <div class="form-group mb-3">
                                                        <label for="longitude">Longitude</label>
                                                        <div class="input-group">
                                                            <span class="input-group-text"><i
                                                                    class="bi bi-compass"></i></span>
                                                            <input type="text" id="longitude"
                                                                class="form-control @error('longitude') is-invalid @enderror"
                                                                name="longitude" value="{{ old('longitude') }}"
                                                                placeholder="e.g. 104.9282">
                                                            @error('longitude')
                                                                <div class="invalid-feedback">{{ $message }}</div>
                                                            @enderror
                                                        </div>
                                                    </div>
                                                </div>

                                                <div class="col-12 col-md-4">
                                                    <div class="form-group mb-3">
                                                        <label for="map_url">Map URL</label>
                                                        <div class="input-group">
                                                            <span class="input-group-text"><i
                                                                    class="bi bi-link-45deg"></i></span>
                                                            <input type="text" id="map_url"
                                                                class="form-control @error('map_url') is-invalid @enderror"
                                                                name="map_url" value="{{ old('map_url') }}"
                                                                placeholder="https://maps.google.com/..." readonly>
                                                            @error('map_url')
                                                                <div class="invalid-feedback">{{ $message }}</div>
                                                            @enderror
                                                        </div>
                                                    </div>
                                                </div>

                                                <div class="col-12 d-flex justify-content-end gap-2">
                                                    <button type="submit" class="btn btn-primary me-1 mb-1">
                                                        <i class="bi bi-plus-circle me-1"></i> Add Contact
                                                    </button>
                                                    <button type="reset" class="btn btn-light-secondary me-1 mb-1">
                                                        <i class="bi bi-arrow-counterclockwise me-1"></i> Reset
                                                    </button>
                                                </div>

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

            {{-- Contact List Table --}}
            <section class="section">
                <div class="row">
                    <div class="col-12">
                        <div class="card">
                            <div class="card-header d-flex justify-content-between align-items-center">
                                <h4 class="card-title mb-0">
                                    <i class="bi bi-envelope me-2 text-primary"></i>Contact List
                                </h4>
                                <span class="badge bg-primary rounded-pill">{{ count($contact) }} Contacts</span>
                            </div>

                            <div class="card-body">
                                <div class="mb-3">
                                    <input type="text" id="searchInput" class="form-control"
                                        placeholder="Search by address, city, email or hotline...">
                                </div>

                                <div class="table-responsive">
                                    <table class="table table-hover table-bordered align-middle mb-0">
                                        {{-- <thead class="table-primary">
                                            <tr>
                                                <th class="text-center" style="width: 60px;">ID</th>
                                                
                                                <th>ADDRESS</th>
                                                <th>CITY / COUNTRY</th>
                                                <th>PRIMARY HOTLINE</th>
                                                <th>EMAIL</th>
                                                <th class="text-center" style="width: 140px;">CREATED AT</th>
                                                <th class="text-center" style="width: 100px;">ACTION</th>
                                            </tr>
                                        </thead> --}}
                                        <thead class="table-primary">
                                            <tr>
                                                <th class="text-center" style="width: 60px;">ID</th>
                                                <th>ADDRESS</th>
                                                <th>CITY / COUNTRY</th>
                                                <th class="text-center" style="width: 30px;">#</th>
                                                <th>PRIMARY HOTLINE</th>
                                                <th>EMAIL</th>
                                                <th class="text-center" style="width: 140px;">CREATED AT</th>
                                                <th class="text-center" style="width: 100px;">ACTION</th>
                                            </tr>
                                        </thead>
                                        {{-- <tbody id="tableBody">
                                            @forelse ($contact as $item)
                                                <tr>
                                                    <td class="text-center">
                                                        <span class="badge text-secondary">{{ $item['id'] }}</span>
                                                    </td>
                                                    
                                                    <td>
                                                        {{ $item['address_line1'] ?? '' }}
                                                        @if (!empty($item['address_line2']))
                                                            <br><small
                                                                class="text-muted">{{ $item['address_line2'] }}</small>
                                                        @endif
                                                    </td>
                                                    <td>
                                                        {{ $item['city'] ?? 'N/A' }}
                                                        @if (!empty($item['country']))
                                                            , {{ $item['country'] }}
                                                        @endif
                                                    </td>
                                                    <td>
                                                        {{ $item['hotline_primary'] ?? 'N/A' }}
                                                        @if (!empty($item['hotline_secondary'] ?? $item['hotline_third']))
                                                            <br><small class="text-muted">{{ $item['hotline_secondary'] ?? '' }} - {{ $item['hotline_third'] ?? '' }}</small>
                                                        @endif
                                                    </td>
                                                    <td>{{ $item['email'] ?? 'N/A' }}</td>
                                                    <td class="text-center">
                                                        @if (!empty($item['created_at']))
                                                            <i class="bi bi-calendar3 me-1"></i>
                                                            {{ \Carbon\Carbon::parse($item['created_at'])->format('d M Y') }}
                                                        @else
                                                            <span class="text-muted fst-italic">N/A</span>
                                                        @endif
                                                    </td>
                                                    <td>
                                                        <div class="d-flex justify-content-center gap-1">
                                                            <button type="button"
                                                                class="btn btn-sm btn-outline-primary btn-edit"
                                                                data-bs-toggle="modal" data-bs-target="#editContactModal"
                                                                data-id="{{ $item['id'] }}"
                                                                data-address-line1="{{ $item['address_line1'] ?? '' }}"
                                                                data-address-line2="{{ $item['address_line2'] ?? '' }}"
                                                                data-city="{{ $item['city'] ?? '' }}"
                                                                data-state="{{ $item['state'] ?? '' }}"
                                                                data-postal-code="{{ $item['postal_code'] ?? '' }}"
                                                                data-country="{{ $item['country'] ?? '' }}"
                                                                data-latitude="{{ $item['latitude'] ?? '' }}"
                                                                data-longitude="{{ $item['longitude'] ?? '' }}"
                                                                data-map-url="{{ $item['map_url'] ?? '' }}"
                                                                data-hotline-primary="{{ $item['hotline_primary'] ?? '' }}"
                                                                data-hotline-secondary="{{ $item['hotline_secondary'] ?? '' }}"
                                                                data-hotline-third="{{ $item['hotline_third'] ?? '' }}"
                                                                data-email="{{ $item['email'] ?? '' }}">
                                                                <i class="bi bi-pencil"></i>
                                                            </button>

                                                            <button type="button"
                                                                class="btn btn-sm btn-outline-danger btn-delete"
                                                                data-id="{{ $item['id'] }}"
                                                                data-label="{{ $item['address_line1'] ?? 'this contact' }}">
                                                                <i class="bi bi-trash"></i>
                                                            </button>
                                                        </div>
                                                    </td>
                                                </tr>
                                            @empty
                                                <tr>
                                                    <td colspan="7" class="text-center py-4 text-muted">
                                                        <i class="bi bi-inbox fs-3 d-block mb-2"></i>No contacts found.
                                                    </td>
                                                </tr>
                                            @endforelse
                                        </tbody> --}}
                                        <tbody id="tableBody">
                                            @forelse ($contact as $item)
                                                @php
                                                    $hotlines = array_filter([
                                                        $item['hotline_primary'] ?? null,
                                                        $item['hotline_secondary'] ?? null,
                                                        $item['hotline_third'] ?? null,
                                                    ]);
                                                    $hotlineCount = max(count($hotlines), 1);
                                                @endphp

                                                @foreach ($hotlines as $index => $hotline)
                                                    <tr>
                                                        {{-- ID — only on first row --}}
                                                        @if ($index === 0)
                                                            <td class="text-center align-middle"
                                                                rowspan="{{ $hotlineCount }}">
                                                                <span
                                                                    class="badge text-secondary">{{ $item['id'] }}</span>
                                                            </td>
                                                        @endif

                                                        {{-- ADDRESS — only on first row --}}
                                                        @if ($index === 0)
                                                            <td class="align-middle" rowspan="{{ $hotlineCount }}">
                                                                
                                                                <div class="fw-semibold">
                                                                    <i class="bi bi-geo-alt me-1 text-danger"></i>{{ $item['address_line1'] ?? 'N/A' }}</div>
                                                                @if (!empty($item['address_line2']))
                                                                    <small
                                                                        class="text-muted">{{ $item['address_line2'] }}</small>
                                                                @endif
                                                            </td>
                                                        @endif

                                                        {{-- CITY / COUNTRY — only on first row --}}
                                                        @if ($index === 0)
                                                            <td class="align-middle" rowspan="{{ $hotlineCount }}">
                                                                <i class="bi bi-building me-1 text-primary"></i>
                                                                {{ $item['city'] ?? 'N/A' }}
                                                                @if (!empty($item['country']))
                                                                    , {{ $item['country'] }}
                                                                @endif
                                                            </td>
                                                        @endif

                                                        {{-- HOTLINE NUMBER + VALUE --}}
                                                        <td class="text-center" style="width: 30px;">{{ $index + 1 }}
                                                        </td>
                                                        <td>
                                                            <i class="bi bi-telephone me-1 text-success"></i>
                                                            {{ $hotline }}
                                                        </td>

                                                        {{-- EMAIL — only on first row --}}
                                                        @if ($index === 0)
                                                            <td class="align-middle" rowspan="{{ $hotlineCount }}">
                                                                <i class="bi bi-envelope me-1 text-info"></i>
                                                                {{ $item['email'] ?? 'N/A' }}
                                                            </td>
                                                        @endif

                                                        {{-- CREATED AT — only on first row --}}
                                                        @if ($index === 0)
                                                            <td class="text-center align-middle"
                                                                rowspan="{{ $hotlineCount }}">
                                                                @if (!empty($item['created_at']))
                                                                    <i class="bi bi-calendar3 me-1 "></i>
                                                                    {{ \Carbon\Carbon::parse($item['created_at'])->format('d M Y') }}
                                                                @else
                                                                    <span class="text-muted fst-italic">N/A</span>
                                                                @endif
                                                            </td>
                                                        @endif

                                                        {{-- ACTION — only on first row --}}
                                                        @if ($index === 0)
                                                            <td class="text-center align-middle"
                                                                rowspan="{{ $hotlineCount }}">
                                                                <div class="d-flex justify-content-center gap-1">
                                                                    <button type="button"
                                                                        class="btn btn-sm btn-outline-primary btn-edit"
                                                                        data-bs-toggle="modal"
                                                                        data-bs-target="#editContactModal"
                                                                        data-id="{{ $item['id'] }}"
                                                                        data-address-line1="{{ $item['address_line1'] ?? '' }}"
                                                                        data-address-line2="{{ $item['address_line2'] ?? '' }}"
                                                                        data-city="{{ $item['city'] ?? '' }}"
                                                                        data-state="{{ $item['state'] ?? '' }}"
                                                                        data-postal-code="{{ $item['postal_code'] ?? '' }}"
                                                                        data-country="{{ $item['country'] ?? '' }}"
                                                                        data-latitude="{{ $item['latitude'] ?? '' }}"
                                                                        data-longitude="{{ $item['longitude'] ?? '' }}"
                                                                        data-map-url="{{ $item['map_url'] ?? '' }}"
                                                                        data-hotline-primary="{{ $item['hotline_primary'] ?? '' }}"
                                                                        data-hotline-secondary="{{ $item['hotline_secondary'] ?? '' }}"
                                                                        data-hotline-third="{{ $item['hotline_third'] ?? '' }}"
                                                                        data-email="{{ $item['email'] ?? '' }}">
                                                                        <i class="bi bi-pencil"></i>
                                                                    </button>
                                                                    <button type="button"
                                                                        class="btn btn-sm btn-outline-danger btn-delete"
                                                                        data-id="{{ $item['id'] }}"
                                                                        data-label="{{ $item['address_line1'] ?? 'this contact' }}">
                                                                        <i class="bi bi-trash"></i>
                                                                    </button>
                                                                </div>
                                                            </td>
                                                        @endif
                                                    </tr>
                                                @endforeach

                                            @empty
                                                <tr>
                                                    <td colspan="9" class="text-center py-4 text-muted">
                                                        <i class="bi bi-inbox fs-3 d-block mb-2"></i>No contacts found.
                                                    </td>
                                                </tr>
                                            @endforelse
                                        </tbody>
                                    </table>
                                </div>

                            </div>
                        </div>
                    </div>
                </div>
            </section>
        </div>

        @include('layouts.footer')
    </div>

    {{-- ==================== TOAST ==================== --}}
    <div id="toastContainer"
        style="position:fixed;top:24px;right:24px;z-index:9999;display:flex;flex-direction:column;gap:10px;"></div>

    @if (session('success'))
        <script>
            document.addEventListener('DOMContentLoaded', function() {
                showToast('success', 'Success', '{{ session('success') }}');
            });
        </script>
    @endif
    @if (session('error'))
        <script>
            document.addEventListener('DOMContentLoaded', function() {
                showToast('error', 'Error', '{{ session('error') }}');
            });
        </script>
    @endif

    {{-- ==================== EDIT MODAL ==================== --}}
    <div class="modal fade" id="editContactModal" tabindex="-1" aria-labelledby="editContactModalLabel"
        aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered modal-xl">
            <div class="modal-content">

                <div class="modal-header bg-primary text-white">
                    <h5 class="modal-title" id="editContactModalLabel">
                        <i class="bi bi-pencil-square me-2"></i>Edit Contact
                    </h5>
                    <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
                </div>

                <form id="editContactForm" method="POST" action="">
                    @csrf

                    <div class="modal-body px-4 py-3">
                        <div class="row g-3">

                            <div class="col-12 col-md-6">
                                <label class="form-label fw-semibold">Address Line 1 <span
                                        class="text-danger">*</span></label>
                                <div class="input-group">
                                    <span class="input-group-text"><i class="bi bi-geo-alt"></i></span>
                                    <input type="text" class="form-control" id="edit_address_line1"
                                        name="address_line1" required>
                                </div>
                            </div>

                            <div class="col-12 col-md-6">
                                <label class="form-label fw-semibold">Address Line 2</label>
                                <div class="input-group">
                                    <span class="input-group-text"><i class="bi bi-geo-alt"></i></span>
                                    <input type="text" class="form-control" id="edit_address_line2"
                                        name="address_line2">
                                </div>
                            </div>

                            <div class="col-12 col-md-6">
                                <label class="form-label fw-semibold">City <span class="text-danger">*</span></label>
                                <div class="input-group">
                                    <span class="input-group-text"><i class="bi bi-building"></i></span>
                                    <input type="text" class="form-control" id="edit_city" name="city" required>
                                </div>
                            </div>

                            <div class="col-12 col-md-6">
                                <label class="form-label fw-semibold">State / Province</label>
                                <div class="input-group">
                                    <span class="input-group-text"><i class="bi bi-map"></i></span>
                                    <input type="text" class="form-control" id="edit_state" name="state">
                                </div>
                            </div>

                            <div class="col-12 col-md-6">
                                <label class="form-label fw-semibold">Postal Code</label>
                                <div class="input-group">
                                    <span class="input-group-text"><i class="bi bi-mailbox"></i></span>
                                    <input type="text" class="form-control" id="edit_postal_code" name="postal_code">
                                </div>
                            </div>

                            <div class="col-12 col-md-6">
                                <label class="form-label fw-semibold">Country <span class="text-danger">*</span></label>
                                <div class="input-group">
                                    <span class="input-group-text"><i class="bi bi-globe"></i></span>
                                    <input type="text" class="form-control" id="edit_country" name="country"
                                        required>
                                </div>
                            </div>

                            <div class="col-12 col-md-4">
                                <label class="form-label fw-semibold">Primary Hotline <span
                                        class="text-danger">*</span></label>
                                <div class="input-group">
                                    <span class="input-group-text"><i class="bi bi-telephone"></i></span>
                                    <input type="text" class="form-control" id="edit_hotline_primary"
                                        name="hotline_primary" required>
                                </div>
                            </div>

                            <div class="col-12 col-md-4">
                                <label class="form-label fw-semibold">Secondary Hotline</label>
                                <div class="input-group">
                                    <span class="input-group-text"><i class="bi bi-telephone"></i></span>
                                    <input type="text" class="form-control" id="edit_hotline_secondary"
                                        name="hotline_secondary">
                                </div>
                            </div>

                            <div class="col-12 col-md-4">
                                <label class="form-label fw-semibold">Third Hotline</label>
                                <div class="input-group">
                                    <span class="input-group-text"><i class="bi bi-telephone"></i></span>
                                    <input type="text" class="form-control" id="edit_hotline_third"
                                        name="hotline_third">
                                </div>
                            </div>

                            <div class="col-12 col-md-6">
                                <label class="form-label fw-semibold">Email <span class="text-danger">*</span></label>
                                <div class="input-group">
                                    <span class="input-group-text"><i class="bi bi-envelope"></i></span>
                                    <input type="email" class="form-control" id="edit_email" name="email" required>
                                </div>
                            </div>

                            {{-- ── MAP PICKER (Edit Modal) ── --}}
                            <div class="col-12">
                                <label class="form-label fw-semibold">
                                    <i class="bi bi-pin-map me-1 text-primary"></i>
                                    Pick Location on Map
                                    <small class="text-muted fw-normal ms-1">— click the map or search to update
                                        coordinates</small>
                                </label>
                                <div id="editMap" class="map-picker-modal mb-2"></div>
                            </div>

                            <div class="col-12 col-md-4">
                                <label class="form-label fw-semibold">Latitude</label>
                                <div class="input-group">
                                    <span class="input-group-text"><i class="bi bi-compass"></i></span>
                                    <input type="text" class="form-control" id="edit_latitude" name="latitude"
                                        placeholder="e.g. 11.5564">
                                </div>
                            </div>

                            <div class="col-12 col-md-4">
                                <label class="form-label fw-semibold">Longitude</label>
                                <div class="input-group">
                                    <span class="input-group-text"><i class="bi bi-compass"></i></span>
                                    <input type="text" class="form-control" id="edit_longitude" name="longitude"
                                        placeholder="e.g. 104.9282">
                                </div>
                            </div>

                            <div class="col-12 col-md-4">
                                <label class="form-label fw-semibold">Map URL</label>
                                <div class="input-group">
                                    <span class="input-group-text"><i class="bi bi-link-45deg"></i></span>
                                    <input type="text" class="form-control" id="edit_map_url" name="map_url"
                                        placeholder="https://maps.google.com/..." readonly>
                                </div>
                            </div>

                        </div>
                    </div>

                    <div class="modal-footer">
                        <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">
                            <i class="bi bi-x-circle me-1"></i> Cancel
                        </button>
                        <button type="submit" class="btn btn-primary" id="editSubmitBtn">
                            <i class="bi bi-check-circle me-1"></i> Save Changes
                        </button>
                    </div>

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

    {{-- ==================== DELETE MODAL ==================== --}}
    <div class="modal fade" id="deleteContactModal" tabindex="-1" aria-labelledby="deleteContactModalLabel"
        aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header bg-danger text-white">
                    <h5 class="modal-title">
                        <i class="bi bi-exclamation-triangle me-2"></i>Confirm Delete
                    </h5>
                    <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body text-center py-4">
                    <i class="bi bi-trash3 text-danger" style="font-size: 3rem;"></i>
                    <h5 class="mt-3">Are you sure?</h5>
                    <p class="text-muted mb-0">
                        You are about to delete: <br>
                        <strong id="deleteContactLabel"></strong><br>
                        This action <span class="text-danger fw-semibold">cannot be undone</span>.
                    </p>
                </div>
                <div class="modal-footer justify-content-center gap-2">
                    <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">
                        <i class="bi bi-x-circle me-1"></i> Cancel
                    </button>
                    <form id="deleteContactForm" method="POST">
                        @csrf
                        @method('DELETE')
                        <button type="submit" class="btn btn-danger" id="deleteSubmitBtn">
                            <i class="bi bi-trash me-1"></i> Yes, Delete
                        </button>
                    </form>
                </div>
            </div>
        </div>
    </div>

    {{-- Leaflet JS --}}
    <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
    <script src="https://unpkg.com/leaflet-control-geocoder/dist/Control.Geocoder.js"></script>

    <script>
        // ── Default center: Phnom Penh ────────────────────────────────
        const DEFAULT_LAT = 11.5564;
        const DEFAULT_LNG = 104.9282;
        const DEFAULT_ZOOM = 13;

        // ══════════════════════════════════════════════════════════════
        // ADD FORM MAP
        // ══════════════════════════════════════════════════════════════
        const addLatInput = document.getElementById('latitude');
        const addLngInput = document.getElementById('longitude');

        const addMap = L.map('addMap').setView([DEFAULT_LAT, DEFAULT_LNG], DEFAULT_ZOOM);
        L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
            attribution: '© OpenStreetMap contributors'
        }).addTo(addMap);

        // Geocoder search box
        L.Control.geocoder({
            defaultMarkGeocode: false,
            placeholder: 'Search location...',
            collapsed: false
        }).on('markgeocode', function(e) {
            const {
                center
            } = e.geocode;
            addMap.setView(center, 16);
            placeAddMarker(center.lat, center.lng);
        }).addTo(addMap);

        let addMarker = null;

        function placeAddMarker(lat, lng) {
            lat = parseFloat(lat).toFixed(8);
            lng = parseFloat(lng).toFixed(8);
            if (addMarker) addMap.removeLayer(addMarker);
            addMarker = L.marker([lat, lng], {
                draggable: true
            }).addTo(addMap);
            addLatInput.value = lat;
            addLngInput.value = lng;
            // ✅ Auto-fill Map URL
            document.getElementById('map_url').value = `https://www.google.com/maps?q=${lat},${lng}`;
            addMarker.on('dragend', function() {
                const pos = addMarker.getLatLng();
                addLatInput.value = pos.lat.toFixed(8);
                addLngInput.value = pos.lng.toFixed(8);
                // ✅ Update Map URL on drag
                document.getElementById('map_url').value =
                    `https://www.google.com/maps?q=${pos.lat.toFixed(8)},${pos.lng.toFixed(8)}`;
            });
        }

        // Click on map to place pin
        addMap.on('click', function(e) {
            placeAddMarker(e.latlng.lat, e.latlng.lng);
        });

        // Sync: typing lat/lng updates map pin
        [addLatInput, addLngInput].forEach(input => {
            input.addEventListener('change', function() {
                const lat = parseFloat(addLatInput.value);
                const lng = parseFloat(addLngInput.value);
                if (!isNaN(lat) && !isNaN(lng)) {
                    addMap.setView([lat, lng], 16);
                    placeAddMarker(lat, lng);
                }
            });
        });

        // Pre-fill from old() if validation failed
        const oldLat = '{{ old('latitude') }}';
        const oldLng = '{{ old('longitude') }}';
        if (oldLat && oldLng) {
            addMap.setView([parseFloat(oldLat), parseFloat(oldLng)], 16);
            placeAddMarker(oldLat, oldLng);
        }

        // ══════════════════════════════════════════════════════════════
        // EDIT MODAL MAP
        // ══════════════════════════════════════════════════════════════
        let editMap = null;
        let editMarker = null;

        document.getElementById('editContactModal').addEventListener('shown.bs.modal', function() {
            // Init map only once; invalidate size on every open
            if (!editMap) {
                editMap = L.map('editMap').setView([DEFAULT_LAT, DEFAULT_LNG], DEFAULT_ZOOM);
                L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
                    attribution: '© OpenStreetMap contributors'
                }).addTo(editMap);

                // Geocoder
                L.Control.geocoder({
                    defaultMarkGeocode: false,
                    placeholder: 'Search location...',
                    collapsed: false
                }).on('markgeocode', function(e) {
                    const {
                        center
                    } = e.geocode;
                    editMap.setView(center, 16);
                    placeEditMarker(center.lat, center.lng);
                }).addTo(editMap);

                // Click
                editMap.on('click', function(e) {
                    placeEditMarker(e.latlng.lat, e.latlng.lng);
                });

                // Sync inputs → map
                const eLat = document.getElementById('edit_latitude');
                const eLng = document.getElementById('edit_longitude');
                [eLat, eLng].forEach(input => {
                    input.addEventListener('change', function() {
                        const lat = parseFloat(eLat.value);
                        const lng = parseFloat(eLng.value);
                        if (!isNaN(lat) && !isNaN(lng)) {
                            editMap.setView([lat, lng], 16);
                            placeEditMarker(lat, lng);
                        }
                    });
                });
            }

            editMap.invalidateSize(); // fix grey tiles after modal opens

            // Pan to saved coordinates
            const lat = parseFloat(document.getElementById('edit_latitude').value);
            const lng = parseFloat(document.getElementById('edit_longitude').value);
            if (!isNaN(lat) && !isNaN(lng)) {
                editMap.setView([lat, lng], 16);
                placeEditMarker(lat, lng);
            }
        });

        function placeEditMarker(lat, lng) {
            lat = parseFloat(lat).toFixed(8);
            lng = parseFloat(lng).toFixed(8);
            if (editMarker) editMap.removeLayer(editMarker);
            editMarker = L.marker([lat, lng], {
                draggable: true
            }).addTo(editMap);
            document.getElementById('edit_latitude').value = lat;
            document.getElementById('edit_longitude').value = lng;
            // ✅ Auto-fill Map URL
            document.getElementById('edit_map_url').value = `https://www.google.com/maps?q=${lat},${lng}`;
            editMarker.on('dragend', function() {
                const pos = editMarker.getLatLng();
                document.getElementById('edit_latitude').value = pos.lat.toFixed(8);
                document.getElementById('edit_longitude').value = pos.lng.toFixed(8);
                // ✅ Update Map URL on drag
                document.getElementById('edit_map_url').value =
                    `https://www.google.com/maps?q=${pos.lat.toFixed(8)},${pos.lng.toFixed(8)}`;
            });
        }

        // ── Populate Edit Modal fields ────────────────────────────────
        document.querySelectorAll('.btn-edit').forEach(btn => {
            btn.addEventListener('click', function() {
                const d = this.dataset;
                document.getElementById('edit_address_line1').value = d.addressLine1;
                document.getElementById('edit_address_line2').value = d.addressLine2;
                document.getElementById('edit_city').value = d.city;
                document.getElementById('edit_state').value = d.state;
                document.getElementById('edit_postal_code').value = d.postalCode;
                document.getElementById('edit_country').value = d.country;
                document.getElementById('edit_latitude').value = d.latitude;
                document.getElementById('edit_longitude').value = d.longitude;
                document.getElementById('edit_map_url').value = d.mapUrl;
                document.getElementById('edit_hotline_primary').value = d.hotlinePrimary;
                document.getElementById('edit_hotline_secondary').value = d.hotlineSecondary;
                document.getElementById('edit_hotline_third').value = d.hotlineThird;
                document.getElementById('edit_email').value = d.email;
                document.getElementById('editContactForm').action = `contact/${d.id}`;
                // Map is updated inside shown.bs.modal event
            });
        });

        // ── Delete Modal ──────────────────────────────────────────────
        document.querySelectorAll('.btn-delete').forEach(btn => {
            btn.addEventListener('click', function() {
                document.getElementById('deleteContactLabel').textContent = this.dataset.label;
                document.getElementById('deleteContactForm').action = `contact/${this.dataset.id}`;
                new bootstrap.Modal(document.getElementById('deleteContactModal')).show();
            });
        });

        document.getElementById('deleteContactForm').addEventListener('submit', function() {
            const btn = document.getElementById('deleteSubmitBtn');
            btn.disabled = true;
            btn.innerHTML = '<span class="spinner-border spinner-border-sm me-1"></span> Deleting...';
        });

        document.getElementById('editContactForm').addEventListener('submit', function() {
            const btn = document.getElementById('editSubmitBtn');
            btn.disabled = true;
            btn.innerHTML = '<span class="spinner-border spinner-border-sm me-1"></span> Saving...';
        });

        // ── Live Search ───────────────────────────────────────────────
        document.getElementById('searchInput').addEventListener('keyup', function() {
            const query = this.value.toLowerCase();
            document.querySelectorAll('#tableBody tr').forEach(row => {
                row.style.display = row.textContent.toLowerCase().includes(query) ? '' : 'none';
            });
        });

        // ── Toast ─────────────────────────────────────────────────────
        function showToast(type, title, message, duration = 4000) {
            const container = document.getElementById('toastContainer');
            const toast = document.createElement('div');
            const isSuccess = type === 'success';
            toast.style.cssText =
                `display:flex;align-items:flex-start;gap:12px;background:var(--color-background-primary,#fff);border:0.5px solid #ddd;border-radius:12px;padding:14px 16px;min-width:300px;max-width:380px;border-left:3px solid ${isSuccess?'#1D9E75':'#E24B4A'};animation:toastIn .3s ease;`;
            toast.innerHTML = `
                <div style="width:22px;height:22px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:13px;font-weight:500;background:${isSuccess?'#E1F5EE':'#FCEBEB'};color:${isSuccess?'#0F6E56':'#A32D2D'};">${isSuccess?'✓':'✕'}</div>
                <div style="flex:1;"><p style="font-size:14px;font-weight:500;margin:0 0 2px;">${title}</p><p style="font-size:13px;color:#666;margin:0;">${message}</p></div>
                <button onclick="this.parentElement.remove()" style="font-size:18px;background:none;border:none;cursor:pointer;color:#999;padding:0;line-height:1;">×</button>
            `;
            if (!document.getElementById('toastKeyframes')) {
                const s = document.createElement('style');
                s.id = 'toastKeyframes';
                s.textContent =
                    '@keyframes toastIn{from{transform:translateX(40px);opacity:0}to{transform:translateX(0);opacity:1}}';
                document.head.appendChild(s);
            }
            container.appendChild(toast);
            setTimeout(() => toast.remove(), duration);
        }
    </script>
@endsection