@extends('layouts.frontend')
@push('title', get_phrase('Bulk Upload '))
@push('meta')@endpush
@section('frontend_layout')

<style>
    .type-title {
        font-size: 18px;
        font-weight: 600; 
    }
</style>

<section class="ca-wraper-main mb-90px mt-4">
    <div class="container">
        <div class="row gx-20px">
            <div class="col-lg-4 col-xl-3">
                @include('user.navigation')
            </div>
            <div class="col-lg-8 col-xl-9">
                <!-- Header -->
                <div class="d-flex align-items-start justify-content-between gap-2 mb-20px">
                    <div class="d-flex justify-content-between align-items-start gap-12px flex-column flex-lg-row w-100">
                        <h1 class="ca-title-18px">{{get_phrase('All Listing Type')}}</h1>
                        <nav aria-label="breadcrumb">
                            <ol class="breadcrumb cap-breadcrumb">
                              <li class="breadcrumb-item cap-breadcrumb-item"><a href="{{route('home')}}">{{get_phrase('Home')}}</a></li>
                              <li class="breadcrumb-item cap-breadcrumb-item active" aria-current="page">{{get_phrase('Bulk Upload')}}</li>
                            </ol>
                        </nav>
                    </div>
                    <button class="btn ca-menu-btn-primary d-lg-none" type="button" data-bs-toggle="offcanvas" data-bs-target="#user-sidebar-offcanvas" aria-controls="user-sidebar-offcanvas">
                        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <path d="M21 5.25H3C2.59 5.25 2.25 4.91 2.25 4.5C2.25 4.09 2.59 3.75 3 3.75H21C21.41 3.75 21.75 4.09 21.75 4.5C21.75 4.91 21.41 5.25 21 5.25Z" fill="#242D47"/>
                            <path d="M21 10.25H3C2.59 10.25 2.25 9.91 2.25 9.5C2.25 9.09 2.59 8.75 3 8.75H21C21.41 8.75 21.75 9.09 21.75 9.5C21.75 9.91 21.41 10.25 21 10.25Z" fill="#242D47"/>
                            <path d="M21 15.25H3C2.59 15.25 2.25 14.91 2.25 14.5C2.25 14.09 2.59 13.75 3 13.75H21C21.41 13.75 21.75 14.09 21.75 14.5C21.75 14.91 21.41 15.25 21 15.25Z" fill="#242D47"/>
                            <path d="M21 20.25H3C2.59 20.25 2.25 19.91 2.25 19.5C2.25 19.09 2.59 18.75 3 18.75H21C21.41 18.75 21.75 19.09 21.75 19.5C21.75 19.91 21.41 20.25 21 20.25Z" fill="#242D47"/>
                        </svg>
                    </button>
                </div>
                <div class="ca-content-card ">
                    <div class="row">
                        <div class="col-12">
                            <div class="d-flex justify-content-between align-items-start gap-12px flex-column flex-lg-row w-100">
                                <h1 class="ca-title-18px">{{get_phrase('Upload Bulk')}}</h1>
                                <nav aria-label="breadcrumb">
                                    <ol class="breadcrumb cap-breadcrumb">
                                    <li class="breadcrumb-item cap-breadcrumb-item capitalize"><a href="{{route('agent.add.listing')}}">{{get_phrase('Back')}}</a></li>
                                    
                                </nav>
                            </div>
                        </div>
                       
                    </div>
                    @php
                        $listingTypes = \App\Models\CustomType::where('status', 1)
                            ->orderBy('sorting', 'asc')
                            ->take($subscription_info->category)
                            ->get();
                    @endphp
                    <form  class="row align-items-center mt-4" action="{{route('agent.bulk_upload_store')}}" method="POST" enctype="multipart/form-data">
                        @csrf
                        <div class="col-sm-6">
                            <div class="mb-2">
                                <label for="listing-types" class="form-label cap-form-label"> {{get_phrase('Listing Type')}} *</label>
                                <select name="type" id="listing-types" class="at-select2 cap-select2 select2-hidden-accessible" data-select2-id="select2-data-1-2ry6" tabindex="-1" aria-hidden="true" required>
                                    <option > {{get_phrase('Select listing Type')}} </option>
                                    @foreach ($listingTypes as $type)
                                        <option value="{{$type->slug}}" data-slug="{{$type->id}}"> {{$type->name}} </option>
                                    @endforeach
                                </select>
                            </div>
                            <input type="hidden" name="slug_id" id="slug_id">
                        </div>
                        <div class="col-sm-6">
                            <div class="mb-2">
                                <label for="listing-categorys" class="form-label cap-form-label"> {{get_phrase('Listing Category')}} *</label>
                                <select name="category" id="listing-categorys" class="at-select2 cap-select2 select2-hidden-accessible" data-select2-id="select2-data-1-2ry6" tabindex="-1" aria-hidden="true" required>
                                    <option value=""> {{get_phrase('Select listing type first')}} </option>
                                    
                                </select>
                            </div>
                        </div>
                        <div class="col-sm-6">
                            <div class="mb-2">
                                <label class="form-label cap-form-label"> {{get_phrase('Country')}} </label>
                                <select id="bulkCountry" name="country"  class="at-select2 cap-select2 select2-hidden-accessible" required>
                                    <option > {{get_phrase('Select Country')}} </option>
                                    @foreach (App\Models\Country::get() as $country)
                                            <option value="{{$country->id}}"> {{get_phrase($country->name)}} </option>
                                        @endforeach
                                </select>
                            </div>
                        </div> 
                        <div class="col-sm-6">
                            <div class="mb-2">
                                <label  class="form-label cap-form-label"> {{get_phrase('City')}} </label>
                                <select name="city" id="bulkCity" class="at-select2 cap-select2 select2-hidden-accessible" required>
                                    <option value=""> {{get_phrase('Select Country  First')}} </option>
                                </select>
                            </div>
                        </div>
                         
                        <div class="col-sm-12">
                            <div class="mb-2">
                                <label for="upload-file" class="form-label cap-form-label"> {{get_phrase('Upload CSV File')}} </label>
                                <input type="file" name="upload_file" id="upload-file" class="form-control ol-form-control" required>
                            </div>
                            <div class="mt-3">
                                <button type="submit"  class="btn cap2-btn-primary d-flex gap-6px align-items-center"> {{ get_phrase('Submit') }} </button>
                            </div>
                        </div>
                         
                       
                    </form>
                </div>

            </div>
        </div>
    </div>
</section>




@include('user.agent.listing.script')

<script>
document.querySelector('form').addEventListener('submit', function (e) {

    let type        = document.getElementById('listing-types').value.trim();
    let category    = document.getElementById('listing-categorys').value.trim();
    let country     = document.getElementById('bulkCountry').value.trim();
    let city        = document.getElementById('bulkCity').value.trim();
    let csvFile     = document.getElementById('upload-file').value.trim();

    let errors = [];

    // Prevent default placeholder option from submitting
    if (type === "" || type === "Select listing Type") {
        errors.push("Please select a valid Listing Type.");
    }

    if (category === "" || category === "Select listing type first") {
        errors.push("Please select a valid Listing Category.");
    }

    if (country === "" || country === "Select Country") {
        errors.push("Please select a valid Country.");
    }

    if (city === "" || city === "Select Country  First") {
        errors.push("Please select a valid City.");
    }

    if (csvFile === "") {
        errors.push("CSV File is required.");
    }

    // Stop submit if errors exist
    if(errors.length > 0) {
        e.preventDefault();
        alert(errors.join("\n"));
        return false;
    }
});
</script>



<script>
    $("#listing-types").on('change', function() {

    var type = $("#listing-types").val();

    var newurl = "{{route('agent.create.category',['type'=>':type'])}}";
    newurl = newurl.replace(':type', type);

    $.ajax({
        url: newurl,
        type: 'GET',
        success: function(response) {
            var category = $("#listing-categorys");

            category.html(`
                <option value="">Select listing category</option>
            `);

            $.each(response, function(index, item) {
                category.append(`
                    <option value="${item.id}">${item.name}</option>
                `);
            });

           
        }
    });
});

// When dropdown changes, put ID inside hidden input
$("#listing-types").on('change', function() {
    var slugId = $(this).find(':selected').data('slug');
    $("#slug_id").val(slugId);
});





    $("#bulkCountry").on('change', function(){
            var country = $("#bulkCountry").val();
            var url = "{{route('agent.country.city',['id'=>':id'])}}";
            url = url.replace(':id', country);
            $.ajax({
                url: url,
                success: function(result){
                    var cityDropdown = $("#bulkCity");
                    cityDropdown.html($('<option>', {
                            value: '',
                            text: "{{get_phrase('Select listing City')}}"
                        }));
                    $.each(result, function(index, city) {
                        cityDropdown.append($('<option>', {
                            value: city.id,
                            text: city.name
                        }));
                    });
                }
            })
        })
</script>

@endsection