@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="/project/dashboard" class="bc-home"><i class="fas fa-home"></i></a>
                                </li>
                                <li class="bc-active">
                                    <a href="" class="bc-link">Projects</a>
                                </li>
                                <li class="breadcrumb-item">
                                    <a href="/project/dashboard">View</a>
                                </li>
                            </ol> -->
                            <ol class="bc">
                                <li>
                                    <a href="/admin/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">Create</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="close" data-dismiss="alert">
                            <span aria-hidden="true">&times;</span>
                        </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="close" data-dismiss="alert">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                </div>
            @endif

            {{-- ── Row-level CSV import errors ─────────── --}}
            @if(session('import_errors'))
                <div class="container-fluid">
                    <div class="alert alert-warning alert-dismissible fade show" role="alert">
                        <strong>Some rows were skipped:</strong>
                        <ul class="mb-0 mt-1">
                            @foreach(session('import_errors') as $err)
                                <li>{{ $err }}</li>
                            @endforeach
                        </ul>
                        <button type="button" class="close" data-dismiss="alert">
                            <span aria-hidden="true">&times;</span>
                        </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="close" data-dismiss="alert">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                </div>
            @endif



            {{-- ── Single Project Form ───────────────────── --}}
            <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>Add Single Project</h3>
                            </div>
                            <div class="location-form-body">
                                <form id="project_form" action="{{ url('/project/store') }}" method="POST"
                                    enctype="multipart/form-data">
                                    @csrf
                                    <div class="row">
                                        <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') }}" class="form-control" required>
                                            </div>
                                        </div>
                                        <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"
                                                    class="form-control" required>
                                                <input type="hidden" id="latitude" name="latitude">
                                                <input type="hidden" id="longitude" name="longitude">
                                                <input type="hidden" id="place_name" name="place_name">
                                            </div>
                                        </div>
                                        <div class="col-xl-4 col-sm-6">
                                            <div class="form-group">
                                                <label class="form-label">
                                                    Project Logo:
                                                    <small class="text-muted">*260px × 100px</small>
                                                </label><br>
                                                <label for="logo_file" class="custom-file-upload">
                                                    <i class="fas fa-cloud-upload-alt"></i> Choose File
                                                </label>
                                                <input id="logo_file" class="file_input" type="file" name="logo_file"
                                                    accept=".png,.jpg,.jpeg,.webp,.svg">
                                            </div>
                                        </div>
                                        <div class="col-xl-4 col-sm-6">
                                            <div class="form-group">
                                                <label class="form-label">
                                                    Project Image:
                                                    <small class="text-muted">*1600px × 800px</small>
                                                </label><br>
                                                <label for="project_image" class="custom-file-upload">
                                                    <i class="fas fa-cloud-upload-alt"></i> Choose File
                                                </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', 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" type="submit">
                                        <i class="fas fa-save mr-1"></i> Submit
                                    </button>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

        </div>
    </div>

</section>

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

        initAutocomplete();

        $('#project_form').validate({
            rules: {
                project_name: { required: true },
                project_location: { required: true },
                logo_file: { required: true, accept: "image/png,image/jpeg,image/jpg,image/webp" },
                project_image: { required: true, accept: "image/png,image/jpeg,image/jpg,image/webp" },
            },
            messages: {
                project_name: { required: "Please enter the project name." },
                project_location: { required: "Please enter the project location." },
                logo_file: { required: "Please choose a project logo.", accept: "Please choose a valid image (PNG/JPEG/WEBP)." },
                project_image: { required: "Please choose a project image.", accept: "Please choose a valid image (PNG/JPEG/WEBP)." },
            },
            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.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.geometry) return;

    //         document.getElementById('latitude').value   = place.geometry.location.lat();
    //         document.getElementById('longitude').value  = place.geometry.location.lng();
    //         document.getElementById('place_name').value = place.formatted_address || place.name;

    //         // Update visible input to show the full address
    //         document.getElementById('project_location').value = place.formatted_address || 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;

            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')