@include('Partials.sidebar')

<section class="main_content dashboard_part large_header_bg">

    @include('Partials.header')

    <div class="main_content_iner default_main_contaner_iner">
        <div class="page-body">

            <div class="container-fluid">
                <div class="page-title">
                    <!-- <div class="row">
                        <div class="col-sm-6 ps-0">
                            <h3>Projects</h3>
                        </div>
                        <div class="col-sm-6 pe-0">
                            <ol class="breadcrumb">
                                <li class="breadcrumb-item">
                                    <a href="/"><i class="fas fa-home"></i></a>
                                </li>
                                <li class="breadcrumb-item active">
                                    <a href="/project/dashboard">Projects</a>
                                </li>
                                <li class="breadcrumb-item">
                                    <a href="/project/create">New</a>
                                </li>
                            </ol>
                        </div>
                    </div> -->

                    <div class="row">
                        <div class="col-sm-6 ps-0">
                            <h3>Projects</h3>
                        </div>
                        <div class="col-sm-6 pe-0">
                            <ol class="bc">
                                <li>
                                    <a href="/project/dashboard" class="bc-home">
                                        <i class="fas fa-home"></i>
                                    </a>
                                </li>
                                <li class="bc-sep">›</li>
                                <li>
                                    <a href="/project/dashboard" class="bc-link">Projects</a>
                                </li>
                                <li class="bc-sep">›</li>
                                <li class="bc-active">
                                    Edit
                                </li>
                            </ol>
                        </div>
                    </div>
                </div>
            </div>

            {{-- ── Flash Messages ───────────────────────── --}}
            @if(session('success'))
                <div class="container-fluid">
                    <div class="alert alert-success alert-dismissible fade show" role="alert">
                        {{ session('success') }}
                        <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
                    </div>
                </div>
            @endif

            @if(session('error'))
                <div class="container-fluid">
                    <div class="alert alert-danger alert-dismissible fade show" role="alert">
                        {{ session('error') }}
                        <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
                    </div>
                </div>
            @endif

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

            <div class="container-fluid">
                <div class="row">
                    <div class="col-md-12">
                        <div class="location-form" style="width:100%">
                            <div class="location-form-header">
                                <h3>Update Project</h3>
                            </div>
                            <div class="location-form-body">
                                <form id="project_form" action="{{ url('/project/update/' . $project->id) }}"
                                    method="POST" enctype="multipart/form-data">
                                    @csrf
                                    @method('PUT')

                                    <div class="row">

                                        {{-- Project Name --}}
                                        <div class="col-xl-4 col-sm-6">
                                            <div class="form-group">
                                                <label class="form-label">Project Name:</label>
                                                <input type="text" id="project_name" name="project_name"
                                                    value="{{ old('project_name', $project->project_name) }}"
                                                    class="form-control" required>
                                            </div>
                                        </div>

                                        {{-- Project Location --}}
                                        <div class="col-xl-4 col-sm-6">
                                            <div class="form-group">
                                                <label class="form-label">Project Location:</label>
                                                <input type="text" id="project_location" name="project_location"
                                                    value="{{ old('project_location', $project->location) }}"
                                                    class="form-control">
                                                <input type="hidden" id="latitude" name="latitude"
                                                    value="{{ $project->latitude }}">
                                                <input type="hidden" id="longitude" name="longitude"
                                                    value="{{ $project->longitude }}">
                                                <input type="hidden" id="place_name" name="place_name"
                                                    value="{{ $project->location }}">
                                                <small class="text-muted">Leave unchanged to keep the current
                                                    location.</small>
                                            </div>
                                        </div>

                                        {{-- Current Logo + Replace --}}
                                        <div class="col-xl-4 col-sm-6">
                                            <div class="form-group">
                                                <label class="form-label">Current Logo:</label><br>
                                                @if($project->logo_file)
                                                    <img src="{{ asset('storage/projects/' . $project->logo_file) }}"
                                                        alt="Current Logo" width="100"
                                                        class="mb-2 d-block border rounded p-1">
                                                @else
                                                    <span class="text-muted d-block mb-2">No logo uploaded yet.</span>
                                                @endif
                                                <label for="logo_file" class="custom-file-upload">
                                                    <i class="fas fa-cloud-upload-alt"></i> Replace Logo
                                                </label>
                                                <input id="logo_file" class="file_input" type="file" name="logo_file"
                                                    accept=".png,.jpg,.jpeg,.webp,.svg">
                                                <small class="text-muted d-block">Leave empty to keep the current
                                                    logo.</small>
                                            </div>
                                        </div>

                                        {{-- Current Project Image + Replace --}}
                                        <div class="col-xl-4 col-sm-6">
                                            <div class="form-group">
                                                <label class="form-label">Current Project Image:</label><br>
                                                @if($project->project_image_file)
                                                    <img src="{{ asset('storage/projects/' . $project->project_image_file) }}"
                                                        alt="Current Image" width="100"
                                                        class="mb-2 d-block border rounded p-1">
                                                @else
                                                    <span class="text-muted d-block mb-2">No image uploaded yet.</span>
                                                @endif
                                                <label for="project_image" class="custom-file-upload">
                                                    <i class="fas fa-cloud-upload-alt"></i> Replace Image
                                                </label>
                                                <input id="project_image" class="file_input" type="file"
                                                    name="project_image" accept=".png,.jpg,.jpeg,.webp">
                                                <small class="text-muted d-block">Leave empty to keep the current
                                                    image.</small>
                                            </div>
                                        </div>

                                    </div>

                                    <button class="btn btn-primary mt-2" type="submit">
                                        <i class="fas fa-save me-1"></i> Update Project
                                    </button>
                                    <a href="/project/dashboard" class="btn btn-secondary mt-2 ms-2">
                                        <i class="fas fa-times me-1"></i> Cancel
                                    </a>

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

        </div>
    </div>

</section>

<script>
    jQuery(document).ready(function ($) {

        initAutocomplete();

        $('#project_form').validate({
            rules: {
                project_name: { required: true },
            },
            messages: {
                project_name: { required: "Please enter the project name." },
            },
            errorPlacement: function (error, element) { error.insertAfter(element); },
            submitHandler: function (form) { form.submit(); }
        });

        $.validator.addMethod('filesize', function (value, element, param) {
            return this.optional(element) || (element.files[0].size / 1024) <= param;
        }, 'File size must be less than {0} KB.');

        $('#project_image').rules('add', { filesize: 10240, messages: { filesize: 'File size must be less than 10 MB.' } });
        $('#logo_file').rules('add', { filesize: 2048, messages: { filesize: 'File size must be less than 2 MB.' } });

    });

    // function initAutocomplete() {
    //     var input = document.getElementById('project_location');
    //     var autocomplete = new google.maps.places.Autocomplete(input);

    //     autocomplete.addListener('place_changed', function () {
    //         var place = autocomplete.getPlace();
    //         if (!place.geometry) return;

    //         document.getElementById('latitude').value = place.geometry.location.lat();
    //         document.getElementById('longitude').value = place.geometry.location.lng();
    //         document.getElementById('place_name').value = place.vicinity || place.name;
    //     });
    // }
    // function initAutocomplete() {
    //     var input = document.getElementById('project_location');
    //     var autocomplete = new google.maps.places.Autocomplete(input);

    //     autocomplete.addListener('place_changed', function () {
    //         var place = autocomplete.getPlace();
    //         if (!place || !place.geometry) return;

    //         // Extract just the district/locality name
    //         var locationName = '';

    //         if (place.address_components) {
    //             // Try locality first (city/district), then administrative_area_level_2 (district), then area_level_1 (state)
    //             var preferred = ['locality', 'administrative_area_level_2', 'administrative_area_level_1'];
    //             for (var i = 0; i < preferred.length; i++) {
    //                 var component = place.address_components.find(function (c) {
    //                     return c.types.includes(preferred[i]);
    //                 });
    //                 if (component) { locationName = component.long_name; break; }
    //             }
    //         }

    //         // Fallback to vicinity or name
    //         if (!locationName) locationName = place.vicinity || place.name || '';

    //         document.getElementById('latitude').value = place.geometry.location.lat();
    //         document.getElementById('longitude').value = place.geometry.location.lng();
    //         document.getElementById('place_name').value = locationName;
    //         document.getElementById('project_location').value = locationName;

    //         console.log(place);
    //     });
    // }

    function initAutocomplete() {
        var input = document.getElementById('project_location');
        var autocomplete = new google.maps.places.Autocomplete(input);

        autocomplete.addListener('place_changed', function () {
            var place = autocomplete.getPlace();
            if (!place || !place.geometry) return;

            var locationName = '';

            if (place.address_components) {
                var preferred = [
                    'sublocality_level_1',
                    'sublocality',
                    'neighborhood',
                    'locality',
                    'administrative_area_level_2',
                    'administrative_area_level_1'
                ];
                for (var i = 0; i < preferred.length; i++) {
                    var component = place.address_components.find(function (c) {
                        return c.types.includes(preferred[i]);
                    });
                    if (component) { locationName = component.long_name; break; }
                }
            }

            if (!locationName) locationName = place.vicinity || place.name || '';

            document.getElementById('latitude').value = place.geometry.location.lat();
            document.getElementById('longitude').value = place.geometry.location.lng();
            document.getElementById('place_name').value = locationName;
            document.getElementById('project_location').value = locationName;
        });
    }

</script>

@include('Partials.footer')