@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="bc">
                                <li>
                                    <a href="/{{ $tenantSlug }}/admin/dashboard" class="bc-home">
                                        <i class="fas fa-home"></i>
                                    </a>
                                </li>
                                <li class="bc-sep">›</li>
                                <li>
                                    <a href="/{{ $tenantSlug }}/admin/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="/{{ $tenantSlug }}/admin/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>
                                                <img id="logo_preview"
                                                    src="{{ $project->logo_file ? asset('storage/tenants/' . $tenantId . '/projects/' . $project->logo_file) : '' }}"
                                                    alt="Current Logo" width="100"
                                                    class="mb-2 d-block border rounded p-1 {{ $project->logo_file ? '' : 'd-none' }}"
                                                    data-original="{{ $project->logo_file ? asset('storage/tenants/' . $tenantId . '/projects/' . $project->logo_file) : '' }}">
                                                <span id="logo_empty_text"
                                                    class="text-muted d-block mb-2 {{ $project->logo_file ? 'd-none' : '' }}">
                                                    No logo uploaded yet.
                                                </span>

                                                <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">
                                            </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>
                                                <img id="project_image_preview"
                                                    src="{{ $project->project_image_file ? asset('storage/tenants/' . $tenantId . '/projects/' . $project->project_image_file) : '' }}"
                                                    alt="Current Image" width="100"
                                                    class="mb-2 d-block border rounded p-1 {{ $project->project_image_file ? '' : 'd-none' }}"
                                                    data-original="{{ $project->project_image_file ? asset('storage/tenants/' . $tenantId . '/projects/' . $project->project_image_file) : '' }}">
                                                <span id="image_empty_text"
                                                    class="text-muted d-block mb-2 {{ $project->project_image_file ? 'd-none' : '' }}">
                                                    No image uploaded yet.
                                                </span>

                                                <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">
                                            </div>
                                        </div>

                                        <div class="col-xl-4 col-sm-6">
                                            <div class="form-group">
                                                <label class="form-label">Project Status:</label>
                                                <div class="d-flex align-items-center gap-2 mt-1">
                                                    <input type="checkbox" id="is_upcoming" name="is_upcoming" value="1"
                                                        class="form-check-input" {{ old('is_upcoming',
                                                        $project->is_upcoming ?? false) ? 'checked' : '' }}
                                                    style="width:18px;height:18px;cursor:pointer;">
                                                    <label for="is_upcoming" class="form-check-label mb-0"
                                                        style="cursor:pointer;">
                                                        Mark as <strong>Upcoming</strong>
                                                    </label>
                                                </div>
                                                <small class="text-muted">Upcoming projects show a badge on the listing
                                                    page.</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="/{{ $tenantSlug }}/admin/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();

        function previewFile(inputId, previewId, emptyTextId) {
            const input = document.getElementById(inputId);
            const preview = document.getElementById(previewId);
            const emptyText = emptyTextId ? document.getElementById(emptyTextId) : null;
            if (!input || !preview) return;

            input.addEventListener('change', function () {
                const file = this.files[0];

                if (file) {
                    const reader = new FileReader();
                    reader.onload = e => {
                        preview.src = e.target.result;
                        preview.classList.remove('d-none');
                        if (emptyText) emptyText.classList.add('d-none');
                    };
                    reader.readAsDataURL(file);
                    return;
                }

                // input cleared — revert to whatever was originally saved
                const original = preview.dataset.original;
                if (original) {
                    preview.src = original;
                    preview.classList.remove('d-none');
                    if (emptyText) emptyText.classList.add('d-none');
                } else {
                    preview.src = '';
                    preview.classList.add('d-none');
                    if (emptyText) emptyText.classList.remove('d-none');
                }
            });
        }

        previewFile('logo_file', 'logo_preview', 'logo_empty_text');
        previewFile('project_image', 'project_image_preview', 'image_empty_text');

        $('#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 || !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')