$('.add_edit_hall_button').click(async function (e) {
    e.preventDefault();

    let form = $('.add_edit_hall_form'),
        data = new FormData(form[0]),
        url = form.attr('action'),
        method = form.attr('method');

    data.append('update_hall_flag', true);

    $('.discount_dates_input').each(function () {
        if ($(this).prop('checked') === false){
            data.append('discount_dates[]', 0);
            data.append('discount_percentage[]', 'empty');
        } else {
            data.append('discount_dates[]', 1);
            let inputSibling = $(this).siblings('.discount_percentage');
            data.append('discount_percentage[]', inputSibling.val());

        }
    });

    // $('input[name="old_added_services_image"]').each(function () {
    //     let siblingImage = $(this).siblings('.added_services_image');
    //    if(siblingImage.val() !== ''){
    //        $(this).val()
    //    }
    // });

    const response=await ajax({
        url,
        data,
        dataType: 'json',
        method
    });

    if (response.url){
        window.location.href = response.url;
    }

    if (response.errors){
        toasterError(response.errors);
    }


});

$(document).on('click', '.add_service',function (e) {
    e.preventDefault();
    let counter = $('.service_container').children('.deleted_service').length+1;
    let serviceDiv = `
                 <div class="deleted_service">
                    <div class="in-flex justify-content-between">
                        <a href="#" class="delete_service"><i class="fa fa-trash text-danger"></i></a>
                        <h5 class="loc_title mb-4">`+added_services+`</h5>
                        <button class="addAnother btn add_service" type="button"><img src="`+addServiceIcon+`" alt=""></button>
                    </div>
                    <div class="row mt-1">
                        <div class="col-md-6">
                            <div class="form-group">
                                 <input name="added_services_name[]" type="text" class="form-control" autocomplete="off" autofocus />
                                <label class="floating-label">`+added_services_name+`</label>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group">
                                <input name="added_services_price[]" type="number" min="1" class="form-control" autocomplete="off" autofocus  />
                                <label class="floating-label"> `+added_services_price+`</label>
                            </div>
                        </div>
                        <div class="col-md-12">
                            <div class="form-group">
                                <textarea name="added_services_description[]" class="form-control" rows="2" autocomplete="off" autofocus ></textarea>
                                <label class="floating-label">`+added_services_description+`</label>
                            </div>
                        </div>
                        <div class="col-md-12">
                            <div class="form-group file-input-group">
                                <div class="wrap">
                                    <div class="file">
                                        <div class="added_service_input file__input" id="file__input">
                                            <input type="hidden" name="old_added_services_image[]" value="">
                                            <input class="file__input--file added_services_image" id="customAddedServiceImageFile_`+counter+`" type="file" multiple="multiple" name="added_services_image[]" />
                                            <label class="file__input--label" for="customAddedServiceImageFile_`+counter+`" data-text-btn="`+select+`">    `+added_services_image+`  :</label>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>`;

    $('.service_container').append(serviceDiv);

});

// Available dates block
let counter = $('.available_dates_container').children('.deleted_available_dates_container').length+2;
$('.add_available_dates_link').click(function (e) {
    e.preventDefault();
    $('.available_dates_container').append(`<div class="deleted_available_dates_container row flex-row-reverse justify-content-between align-items-center align-content-center">
                            <div class="form-group col-md-5">
                                <div class="custom-control custom-checkbox">
                                    <div class="discount_dates_container d-flex justify-content-start align-content-center align-items-center">
                                        <input type="checkbox" value="1" class="custom-control-input discount_dates_input" id="discount_dates_`+counter+`">
                                        <label class="custom-control-label col-md-4" for="discount_dates_`+counter+`"> `+discount_dates+`</label>
                                    </div>
                                </div>
                            </div>
                            <div class="form-group col-md-3">
                                <input type="text" placeholder="`+available_dates_to+`" name="available_dates_to[]" value="" class="available_dates available_dates_to form-control">
                            </div>
                            <div class="form-group col-md-3">
                                <input type="text" placeholder="`+available_dates_from+`" name="available_dates_from[]" value="" class="available_dates available_dates_from form-control">
                            </div>
                            <div class="form-group col-md-1">
                                <a class="btn btn-danger delete_available_dates_link" href="#"><i class="fa fa-times"></i></a>
                            </div>
                        </div>`);

    counter = counter+1;
});

$(document).on('click', '.discount_dates_input', function () {
    if ($(this).prop('checked') === true){
        $(this).siblings('input[name="discount_percentage[]"]').remove();
        $(this).parents('.discount_dates_container').append(`<input type="number" min="1" pattern="/[1-9]/" class="discount_percentage col-md-8 form-control" placeholder="`+discount_percentage+`" value="">`)
    } else {
        $(this).siblings('.discount_percentage').remove();
    }
});

$(document).on('change', '.added_services_image',function (e) {
    $(this).siblings('input[name="old_added_services_image[]"]').val('new_image_added')
});

$(document).on('click', '.delete_service', function (e) {
    e.preventDefault();
    $(this).parents('.deleted_service').remove();
});

$('select[name="region_id"], select[name="city_id"]').change(async function (e) {
    let region = $('select[name="region_id"]'),
        city = $('select[name="city_id"]'),
        sector = $('select[name="sector_id"]');
    let data = {
            region_id: region.val(),
            city_id: city.val()
        },
        url = getCityAndSectorRoute,
        method = 'get';

    if (region.val() === ''){
        city.html(`<option value=""> `+city_name+` </option>`);
        sector.html(`<option value=""> `+region_name+` </option>`);
        return false;
    }
    if (city.val() === ''){
        sector.html(`<option value=""> `+region_name+` </option>`);
    }

    const response=await ajax({
        url,
        data,
        dataType: 'json',
        method
    });

    if (response.cities.length && !response.sectors.length){
        city.html(`<option value=""> `+city_name+` </option>`);
        for(let i = 0; i < response.cities.length; i++){
            city.append(`<option value="`+response.cities[i].id+`">`+response.cities[i].name+`</option>`)
        }
    }
    if (response.cities.length && response.sectors.length){
        city.html(`<option value=""> `+city_name+` </option>`);
        for(let i = 0; i < response.cities.length; i++){
            city.append(`<option value="`+response.cities[i].id+`">`+response.cities[i].name+`</option>`)
        }
        sector.html(`<option value=""> `+sector_name+` </option>`);
        for(let i = 0; i < response.sectors.length; i++){
            sector.append(`<option value="`+response.sectors[i].id+`">`+response.sectors[i].name+`</option>`)
        }
    }

});

let reservation_type = $('select[name="reservation_type"] option:selected').val();
if(reservation_type === 'person_count'){
    $('.booking_amount_per_person').removeClass('d-none');
    $('.booking_amount_per_day').addClass('d-none');
    $('.booking_amount_per_day input').val('');
}
if(reservation_type === 'days_count'){
    $('.booking_amount_per_day').removeClass('d-none');
    $('.booking_amount_per_person').addClass('d-none');
    $('.booking_amount_per_person input').val('');
}


$('select[name="reservation_type"]').change(function () {
    if($(this).val() === 'person_count'){
        $('.booking_amount_per_person').removeClass('d-none');
        $('.booking_amount_per_day').addClass('d-none');
        $('.booking_amount_per_day input').val('');
    }
    if($(this).val() === 'days_count'){
        $('.booking_amount_per_day').removeClass('d-none');
        $('.booking_amount_per_person').addClass('d-none');
        $('.booking_amount_per_person input').val('');
    }
});


$(document).on('click', '.delete_available_dates_link', function(e){
    e.preventDefault();
    $(this).parents('.deleted_available_dates_container').remove();
    counter = counter+1;
});


$(document).ready(function() {

    $(document).on('change','input[name="added_services_image[]"]', function(event) {
        var files = event.target.files;
        for (var i = 0; i < files.length; i++) {
            var file = files[i];
            $("<div class='added_service_images file__value'><div class='file__value--text'>" + file.name + "</div><div class='file__value--remove' data-id='" + file.name + "' ></div></div>").insertAfter($(this).parents('.added_service_input'));
        }
    });
});


$('body').on('click', '.added_service_images', function() {
    $(this).siblings('.added_service_input').children('.added_services_image, input[type="hidden"]').val('');
    $(this).remove();
});

$('.input-images').imageUploader({
    label: upload_hall_image,
});
