@extends('layouts.app')

@section('title', 'Dashboard - Création de Site')

@push('styles')
<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
<style>
    :root {
        --primary-color: #020548;
        --secondary-color: #3b5de7;
        --accent-color: #ff6b6b;
        --light-bg: #f8f9fa;
    }

    .form-container {
        max-width: 1000px;
        margin: 0 auto;
        padding: 2rem;
    }

    .form-header {
        background-color: var(--primary-color);
        color: white;
        padding: 1.5rem;
        border-radius: 10px 10px 0 0;
        margin-bottom: 0;
    }

    .form-card {
        border: none;
        border-radius: 10px;
        box-shadow: 0 10px 30px rgba(2, 5, 72, 0.1);
        overflow: hidden;
    }

    .form-body {
        padding: 2rem;
        background-color: white;
    }

    .form-label {
        font-weight: 600;
        color: var(--primary-color);
        margin-bottom: 0.5rem;
    }

    .form-control, .form-select, .form-check-input {
        border: 2px solid #e0e0e0;
        border-radius: 8px;
        padding: 12px 15px;
        transition: all 0.3s;
    }

    .form-control:focus, .form-select:focus {
        border-color: var(--secondary-color);
        box-shadow: 0 0 0 3px rgba(59, 93, 231, 0.1);
    }

    .input-group-text {
        background-color: var(--light-bg);
        color: var(--primary-color);
        font-weight: 500;
    }

    .btn-submit {
        background-color: var(--primary-color);
        border: none;
        padding: 12px 30px;
        font-weight: 600;
        letter-spacing: 0.5px;
        transition: all 0.3s;
    }

    .btn-submit:hover {
        background-color: var(--secondary-color);
        transform: translateY(-2px);
    }

    /* Style amélioré pour le champ fichier */
    .file-upload-wrapper {
        position: relative;
        margin-bottom: 1.5rem;
    }

    .file-upload-label {
        display: block;
        padding: 12px;
        border: 2px dashed #e0e0e0;
        border-radius: 8px;
        text-align: center;
        cursor: pointer;
        transition: all 0.3s;
    }

    .file-upload-label:hover {
        border-color: var(--secondary-color);
        background-color: rgba(59, 93, 231, 0.05);
    }

    .file-upload-input {
        position: absolute;
        left: 0;
        top: 0;
        opacity: 0;
        width: 100%;
        height: 100%;
        cursor: pointer;
    }

    .file-upload-icon {
        font-size: 2rem;
        color: var(--secondary-color);
        margin-bottom: 0.5rem;
    }

    .file-upload-text {
        color: var(--primary-color);
        font-weight: 500;
    }

    .file-upload-hint {
        color: #6c757d;
        font-size: 0.85rem;
    }

    /* Preview des images */
    .image-preview-container {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
        margin-top: 15px;
    }

    .image-preview-item {
        position: relative;
        width: 100px;
        height: 100px;
        border-radius: 8px;
        overflow: hidden;
        border: 1px solid #e0e0e0;
    }

    .image-preview-item img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    /* Breadcrumb personnalisé */
    .custom-breadcrumb {
        background-color: transparent;
        padding: 0;
    }

    .custom-breadcrumb .breadcrumb-item a {
        color: var(--secondary-color);
        text-decoration: none;
    }

    .custom-breadcrumb .breadcrumb-item.active {
        color: var(--primary-color);
        font-weight: 500;
    }

    /* Section options */
    .option-section {
        padding: 1.5rem;
        border-radius: 8px;
        background-color: var(--light-bg);
        margin-bottom: 1.5rem;
    }

    .option-title {
        color: var(--primary-color);
        font-weight: 600;
        margin-bottom: 1rem;
        display: flex;
        align-items: center;
    }

    .option-title i {
        margin-right: 10px;
        font-size: 1.2rem;
    }

    /* Style pour les champs de temps */
    .time-input-group {
        display: flex;
        align-items: center;
    }
    .time-input-group .form-control {
        flex: 1;
    }
    .time-input-group .input-group-text {
        width: auto;
        background-color: var(--light-bg);
    }
</style>
@endpush

@section('content')
<div class="container-fluid">
    <!-- En-tête de page -->
    <div class="row mb-4">
        <div class="col-12">
            <div class="d-flex justify-content-between align-items-center">
                <h2 class="fw-bold mb-0" style="color: var(--primary-color);">
                    <i class="fas fa-map-marked-alt me-2"></i>Création de Site Touristique
                </h2>
                <nav aria-label="breadcrumb">
                    <ol class="breadcrumb custom-breadcrumb">
                        <li class="breadcrumb-item"><a href="{{ route('dashboard') }}">Dashboard</a></li>
                        <li class="breadcrumb-item active">Nouveau Site</li>
                    </ol>
                </nav>
            </div>
        </div>
    </div>

    <!-- Carte de formulaire -->
    <div class="row justify-content-center">
        <div class="col-lg-10">
            <div class="form-card">
                <h4 class="form-header">
                    <i class="fas fa-plus-circle me-2"></i>Ajouter un nouveau site touristique
                </h4>

                <div class="form-body">
                    <form action="{{ route('formSite.store') }}" method="POST" enctype="multipart/form-data">
                        @csrf

                        <!-- 1. Informations de base -->
                        <div class="option-section">
                            <h5 class="option-title"><i class="fas fa-info-circle"></i> Informations de base</h5>

                            <div class="mb-3">
                                <label for="name" class="form-label">Nom du site <span class="text-danger">*</span></label>
                                <input type="text" class="form-control" id="name" name="name" placeholder="Ex: Parc National du Banco" required>
                            </div>

                            <div class="mb-3">
                                <label for="location" class="form-label">Lieu <span class="text-danger">*</span></label>
                                <input type="text" class="form-control" id="location" name="location" placeholder="Ex: Abidjan, Côte d'Ivoire" required>
                            </div>
                        </div>


                        <!-- 2. Coordonnées GPS -->
<!-- 2. Coordonnées GPS -->
<div class="option-section">
    <h5 class="option-title"><i class="fas fa-map-marker-alt"></i> Coordonnées GPS</h5>

    <div class="row">
        <div class="col-md-6 mb-3">
            <label for="lat" class="form-label">Latitude <span class="text-danger">*</span></label>
            <div class="input-group">
                <input type="text" class="form-control" id="lat" name="lat"
                       placeholder="Ex: 5.359951" required>
                <span class="input-group-text"><i class="fas fa-globe"></i></span>
            </div>
            <small class="text-muted">Valeur entre -90 et 90 (ex: 5.359951 pour Abidjan)</small>
            @error('lat')
                <div class="text-danger mt-2">{{ $message }}</div>
            @enderror
        </div>

        <div class="col-md-6 mb-3">
            <label for="longi" class="form-label">Longitude <span class="text-danger">*</span></label>
            <div class="input-group">
                <input type="text" class="form-control" id="longi" name="longi"
                       placeholder="Ex: -4.008256" required>
                <span class="input-group-text"><i class="fas fa-globe"></i></span>
            </div>
            <small class="text-muted">Valeur entre -180 et 180 (ex: -4.008256 pour Abidjan)</small>
            @error('longi')
                <div class="text-danger mt-2">{{ $message }}</div>
            @enderror
        </div>
    </div>
</div>

                        <!-- 2. Images -->
                        <div class="option-section">
                            <h5 class="option-title"><i class="fas fa-images"></i> Images du site</h5>

                            <div class="file-upload-wrapper">
                                <label for="images" class="file-upload-label">
                                    <div class="file-upload-icon">
                                        <i class="fas fa-cloud-upload-alt"></i>
                                    </div>
                                    <div class="file-upload-text">Glissez-déposez vos fichiers ou cliquez pour parcourir</div>
                                    <div class="file-upload-hint">Formats acceptés : JPG, PNG (Max 2MB par fichier)</div>
                                </label>
                                <input type="file" id="images" name="images[]" multiple accept="image/*" class="file-upload-input" required>
                            </div>

                            <!-- Aperçu des images -->
                            <div class="image-preview-container" id="imagePreview"></div>

                            @error('images')
                                <div class="text-danger mt-2">{{ $message }}</div>
                            @enderror
                            @error('images.*')
                                <div class="text-danger mt-2">{{ $message }}</div>
                            @enderror
                        </div>

                        <!-- 3. Descriptions -->
                        <div class="option-section">
                            <h5 class="option-title"><i class="fas fa-align-left"></i> Descriptions</h5>

                            <div class="mb-3">
                                <label for="description_fr" class="form-label">Description (français) <span class="text-danger">*</span></label>
                                <textarea class="form-control" id="description_fr" name="description_fr" rows="4" placeholder="Décrivez le site en français" required></textarea>
                            </div>

                            <div class="mb-3">
                                <label for="description_en" class="form-label">Description (anglais) <span class="text-danger">*</span></label>
                                <textarea class="form-control" id="description_en" name="description_en" rows="4" placeholder="Describe the site in English" required></textarea>
                            </div>
                        </div>

                        <!-- 4. Tarifs -->
                        <div class="option-section">
                            <h5 class="option-title"><i class="fas fa-tags"></i> Tarifs (FCFA)</h5>

                            <div class="row">
                                <div class="col-md-6 mb-3">
                                    <label for="standard_price" class="form-label">Prix standard <span class="text-danger">*</span></label>
                                    <div class="input-group">
                                        <input type="number" class="form-control" id="standard_price" name="standard_price" min="0" placeholder="Ex: 5000" required>
                                        <span class="input-group-text">FCFA</span>
                                    </div>
                                </div>

                                <div class="col-md-6 mb-3">
                                    <label for="premium_price" class="form-label">Prix premium <span class="text-danger">*</span></label>
                                    <div class="input-group">
                                        <input type="number" class="form-control" id="premium_price" name="premium_price" min="0" placeholder="Ex: 10000" required>
                                        <span class="input-group-text">FCFA</span>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- 5. Horaires de visite -->
                        <div class="option-section">
                            <h5 class="option-title"><i class="fas fa-clock"></i> Horaires de visite</h5>

                            <div class="row">
                                <div class="col-md-6 mb-3">
                                    <label for="visit_start_time" class="form-label">Heure d'ouverture <span class="text-danger">*</span></label>
                                    <div class="time-input-group">
                                        <input type="time" class="form-control" id="visit_start_time" name="visit_start_time" required>
                                        <span class="input-group-text"><i class="fas fa-door-open"></i></span>
                                    </div>
                                </div>

                                <div class="col-md-6 mb-3">
                                    <label for="visit_end_time" class="form-label">Heure de fermeture <span class="text-danger">*</span></label>
                                    <div class="time-input-group">
                                        <input type="time" class="form-control" id="visit_end_time" name="visit_end_time" required>
                                        <span class="input-group-text"><i class="fas fa-door-closed"></i></span>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Bouton de soumission -->
                        <div class="d-flex justify-content-center mt-5">
                            <button type="submit" class="btn btn-submit">
                                <i class="fas fa-save me-2"></i>Créer le site
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
<script>
//     $(document).ready(function() {
//         // Aperçu des images avant upload
//         $('#images').change(function() {
//             $('#imagePreview').empty();
//             if (this.files) {
//                 $.each(this.files, function(i, file) {
//                     var reader = new FileReader();
//                     reader.onload = function(e) {
//                         $('#imagePreview').append(
//                             '<div class="image-preview-item">' +
//                                 '<img src="' + e.target.result + '" alt="Preview">' +
//                             '</div>'
//                         );
//                     }
//                     reader.readAsDataURL(file);
//                 });
//             }
//         });

//         // Validation des prix
//         $('#premium_price').on('change', function() {
//             if (parseInt($(this).val()) < parseInt($('#standard_price').val())) {
//                 alert('Le prix premium doit être supérieur au prix standard');
//                 $(this).val(parseInt($('#standard_price').val()) + 1000);
//             }
//         });
//     });
// </script>



{{-- @push('scripts')
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
<script>
    $(document).ready(function() {
        // Aperçu des images avant upload
        $('#images').change(function() {
            $('#imagePreview').empty();
            if (this.files) {
                $.each(this.files, function(i, file) {
                    var reader = new FileReader();
                    reader.onload = function(e) {
                        $('#imagePreview').append(
                            '<div class="image-preview-item">' +
                                '<img src="' + e.target.result + '" alt="Preview">' +
                            '</div>'
                        );
                    }
                    reader.readAsDataURL(file);
                });
            }
        });

        // Validation des prix
        $('#premium_price').on('change', function() {
            if (parseInt($(this).val()) < parseInt($('#standard_price').val())) {
                alert('Le prix premium doit être supérieur au prix standard');
                $(this).val(parseInt($('#standard_price').val()) + 1000);
            }
        });

        // Validation des coordonnées GPS
        function validateCoordinates() {
            const lat = parseFloat($('#lat').val());
            const longi = parseFloat($('#longi').val());

            if (isNaN(lat) || lat < -90 || lat > 90) {
                alert('La latitude doit être un nombre entre -90 et 90');
                $('#lat').focus();
                return false;
            }

            if (isNaN(longi) || longi < -180 || longi > 180) {
                alert('La longitude doit être un nombre entre -180 et 180');
                $('#longi').focus();
                return false;
            }

            return true;
        }

        // Validation avant soumission
        $('form').on('submit', function(e) {
            if (!validateCoordinates()) {
                e.preventDefault();
                return false;
            }
        });

        // Formatage automatique des coordonnées
        $('#lat, #longi').on('blur', function() {
            let value = $(this).val().replace(',', '.');
            if (value && !isNaN(parseFloat(value))) {
                $(this).val(parseFloat(value).toFixed(6));
            }
        });
    });
</script> --}}
<script>
    $(document).ready(function() {
    // Formatage automatique des coordonnées GPS
    $('#lat, #longi').on('blur', function() {
        let value = $(this).val().replace(',', '.');
        if (value && !isNaN(parseFloat(value))) {
            $(this).val(parseFloat(value).toFixed(6));
        }
    });

    // Aperçu des images avant upload
    $('#images').change(function() {
        $('#imagePreview').empty();
        if (this.files) {
            $.each(this.files, function(i, file) {
                var reader = new FileReader();
                reader.onload = function(e) {
                    $('#imagePreview').append(
                        '<div class="image-preview-item">' +
                            '<img src="' + e.target.result + '" alt="Preview">' +
                        '</div>'
                    );
                }
                reader.readAsDataURL(file);
            });
        }
    });

    // Validation des prix
    $('#premium_price').on('change', function() {
        if (parseInt($(this).val()) < parseInt($('#standard_price').val())) {
            alert('Le prix premium doit être supérieur au prix standard');
            $(this).val(parseInt($('#standard_price').val()) + 1000);
        }
    });
});
</script>
@endpush
