@extends('layouts.master')
@section('title', 'Agency Profile')
@section('content')

    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css">

    <style>
        .custom-file-input {
            position: relative;
            overflow: hidden;
        }

        .custom-file-input input[type=file] {
            position: absolute;
            opacity: 0;
            right: 0;
            top: 0;
            height: 100%;
            cursor: pointer;
        }

        .file-preview {
            margin-top: 0.5rem;
            max-height: 100px;
        }

        .file-name {
            font-size: 0.9rem;
            color: #6c757d;
        }

        .form-section {
            border: 1px solid #dee2e6;
            padding: 20px;
            border-radius: 6px;
            background: #f9f9f9;
            margin-bottom: 20px;
        }
    </style>

    <div class="card shadow-sm">
        <div class="card-header d-flex justify-content-between align-items-center text-black">
            <h5 class="mb-0">Agency Profile</h5>
        </div>

        <div class="card-body">
            <form id="agencyForm" action="{{ route('agency.update_profile', $agency->id) }}" method="POST"
                enctype="multipart/form-data">
                @csrf
                @method('PUT')

                <div class="form-section">
                    <div class="row row-cols-md-2 g-4">

                        {{-- Agency Name --}}
                        <div class="form-group">
                            <label for="name">Agency Name <span class="text-danger">*</span></label>
                            <input type="text" name="name" id="name" class="form-control"
                                value="{{ old('name', $agency->name) }}" placeholder="e.g. Al Madina Travels" required>
                        </div>

                        {{-- Owner Name --}}
                        <div class="form-group">
                            <label for="owner_name">Owner Name <span class="text-danger">*</span></label>
                            <input type="text" name="owner_name" id="owner_name" class="form-control"
                                value="{{ old('owner_name', $agency->owner_name) }}" placeholder="e.g. Ahmed Khan" required>
                        </div>

                        {{-- Address --}}
                        <div class="form-group col-md-12">
                            <label for="address">Address <span class="text-danger">*</span></label>
                            <textarea name="address" id="address" class="form-control" rows="2" placeholder="Full address..." required>{{ old('address', $agency->address) }}</textarea>
                        </div>

                        {{-- Hajj License Number --}}
                        <div class="form-group">
                            <label for="hajj_license">Hajj License No. <span class="text-danger">*</span></label>
                            <input type="text" name="hajj_license" id="hajj_license" class="form-control"
                                value="{{ old('hajj_license', $agency->hajj_license) }}" placeholder="e.g. HL-987654"
                                required>
                        </div>

                        {{-- Phone --}}
                        <div class="form-group">
                            <label for="phone">Phone <span class="text-danger">*</span></label>
                            <input type="text" name="phone" id="phone" class="form-control"
                                value="{{ old('phone', $agency->phone) }}" placeholder="+966512345678" required>
                        </div>

                        {{-- Email --}}
                        <div class="form-group">
                            <label for="email">Email <span class="text-danger">*</span></label>
                            <input type="email" name="email" id="email" class="form-control"
                                value="{{ old('email', $agency->email) }}" placeholder="agency@example.com" required>
                        </div>

                        {{-- Website --}}
                        <div class="form-group">
                            <label for="website">Website</label>
                            <input type="url" name="website" id="website" class="form-control"
                                value="{{ old('website', $agency->website) }}" placeholder="https://www.example.com">
                        </div>
                    </div>
                </div>

                <div class="form-section">
                    <div class="row row-cols-md-2 g-4">

                        {{-- Upload Logo --}}
                        <div class="form-group">
                            <label for="logo">Upload Logo (Image)</label>
                            <div class="custom-file-input border rounded p-2 bg-white">
                                <span class="btn btn-sm btn-outline-secondary">
                                    <i class="bi bi-image"></i> Choose Logo
                                </span>
                                <input type="file" name="logo" id="logo" accept="image/*"
                                    onchange="previewImage(event, 'logoPreview')">
                                <div class="file-name" id="logoName">No file chosen</div>
                                @if ($agency->logo)
                                    <img src="{{ asset($agency->logo) }}" id="logoPreview"
                                        class="img-fluid file-preview" />
                                @else
                                    <img id="logoPreview" class="img-fluid file-preview d-none" />
                                @endif
                            </div>
                        </div>

                        {{-- Upload Hajj License --}}
                        <div class="form-group">
                            <label for="hajj_license_file">Upload Hajj License (PDF/Image)</label>
                            <div class="custom-file-input border rounded p-2 bg-white">
                                <span class="btn btn-sm btn-outline-secondary">
                                    <i class="bi bi-file-earmark-arrow-up"></i> Choose File
                                </span>
                                <input type="file" name="hajj_license_file" id="hajj_license_file" accept=".pdf,image/*"
                                    onchange="showFileName(event, 'licenseFileName')">
                                <div class="file-name" id="licenseFileName">No file chosen</div>
                                @if ($agency->hajj_license_file)
                                    <small class="text-muted">Current file: <a
                                            href="{{ asset('storage/' . $agency->hajj_license_file) }}"
                                            target="_blank">View</a></small>
                                @endif
                            </div>
                        </div>

                    </div>
                </div>

                <div class="text-end mt-3">
                    <button type="submit" class="btn btn-success">
                        <i class="bi bi-save2"></i> Save Profile
                    </button>
                </div>
            </form>

        </div>
    </div>

    {{-- File input + Form dirty check + Confirmation JS --}}
    <script>
        function previewImage(event, previewId) {
            const file = event.target.files[0];
            const preview = document.getElementById(previewId);
            const nameDisplay = document.getElementById('logoName');

            if (file && file.type.startsWith('image/')) {
                const reader = new FileReader();
                reader.onload = function(e) {
                    preview.src = e.target.result;
                    preview.classList.remove('d-none');
                    nameDisplay.textContent = file.name;
                };
                reader.readAsDataURL(file);
            } else {
                preview.classList.add('d-none');
                nameDisplay.textContent = "Invalid file type";
            }
        }

        function showFileName(event, nameId) {
            const file = event.target.files[0];
            const nameDisplay = document.getElementById(nameId);
            if (file) {
                nameDisplay.textContent = `${file.name} (${(file.size / 1024).toFixed(1)} KB)`;
            } else {
                nameDisplay.textContent = "No file chosen";
            }
        }

        // Track form changes
        let isFormChanged = false;
        const form = document.getElementById('agencyForm');

        // Mark form as changed if any input, textarea, or file is modified
        form.querySelectorAll('input, textarea, select').forEach(el => {
            el.addEventListener('change', () => {
                isFormChanged = true;
            });
        });

        // Confirm before submitting if changes were made
        form.addEventListener('submit', function(e) {
            if (isFormChanged) {
                const confirmSubmit = confirm("You have made changes. Do you want to save?");
                if (!confirmSubmit) {
                    e.preventDefault();
                    return false;
                }
            }
            isFormChanged = false; // reset flag after confirmed submit
        });

        // Warn user if navigating away with unsaved changes
        window.addEventListener('beforeunload', function(e) {
            if (isFormChanged) {
                e.preventDefault();
                e.returnValue = '';
            }
        });
    </script>

@endsection