@extends('dashboard.layout.default')

@section('page_title',$page_title)

@section('content')
<!-- Content Wrapper. Contains page content -->
<div class="content-wrapper">
    <!-- Content Header (Page header) -->
    <section class="content-header">
        <div class="container-fluid">
        <div class="row mb-2">
            <div class="col-sm-6 float-left">
                <ol class="breadcrumb float-sm-left">
                    <li class="breadcrumb-item"><a href="{{Route('dashboard')}}">{{ __("pages.home") }}</a></li>
                    <li class="breadcrumb-item"><a href="{{Route('tours.index')}}">{{__('pages.tours')}}</a></li>
                    <li class="breadcrumb-item active">{{$page_title}}</li>
                </ol>
            </div>
            <div class="col-sm-6 float-right " style="direction: ltr">
                <a target="_blank" href="{{Route('bookings.index',['tour_id' => $tour['id']])}}" class="btn btn-warning 
                @if(app()->getLocale() == 'ar') float-left @else float-right @endif"><i class="fas fa-ticket-alt"></i> {{__('pages.bookings')}}</a>
            </div>
        </div>
        </div><!-- /.container-fluid -->
    </section>

    <!-- Main content -->
    <section class="content">


        @if(session()->has('success'))
            <div class="alert alert-success">
                {{ session()->get('success') }}
            </div>
        @endif
        @if($errors->any())
            <div class="alert alert-danger">
                <ul>
                    @foreach($errors->all() as $error)
                        <li>{{ $error }}</li>
                    @endforeach
                </ul>
            </div>
        @endif

        <div class="messages-list py-1"></div>

        <!-- /.card-header -->
            <div class="container-fluid p-0">
                <ul class="nav nav-tabs" id="custom-tabs-tab" role="tablist">

                    <li class="nav-item">
                        <a class="nav-link active" id="custom-tabs-basic_info-tab" data-toggle="pill" href="#custom-tabs-basic_info-content-tab" role="tab" aria-controls="custom-tabs-basic_info-content-tab" aria-selected="true">{{__('pages.basic_info')}}</a>
                    </li>

                    <li class="nav-item">
                        <a class="nav-link" id="custom-tabs-features-tab" data-toggle="pill" href="#custom-tabs-features-content-tab" role="tab" aria-controls="custom-tabs-features-tab" aria-selected="false">{{__('pages.features')}}</a>
                    </li>

                    <li class="nav-item">
                        <a class="nav-link" id="custom-tabs-custom-features-tab" data-toggle="pill" href="#custom-tabs-custom-features-content-tab" role="tab" aria-controls="custom-tabs-custom-features-tab" aria-selected="false">{{__('pages.custom_features')}}</a>
                    </li>

                    <li class="nav-item">
                        <a class="nav-link" id="custom-tabs-timeline-tab" data-toggle="pill" href="#custom-tabs-timeline-content-tab" role="tab" aria-controls="custom-tabs-timeline-tab" aria-selected="false">{{__('pages.timeline')}}</a>
                    </li>

                    <li class="nav-item">
                        <a class="nav-link" id="custom-tabs-filters-tab" data-toggle="pill" href="#custom-tabs-filters-content-tab" role="tab" aria-controls="custom-tabs-filters-tab" aria-selected="false">{{__('pages.filters')}}</a>
                    </li>

                    <li class="nav-item">
                        <a class="nav-link" id="custom-tabs-packages-tab" data-toggle="pill" href="#custom-tabs-packages-content-tab" role="tab" aria-controls="custom-tabs-packages-tab" aria-selected="false">{{__('pages.packages')}}</a>
                    </li>

                    
                    <li class="nav-item">
                        <a class="nav-link" id="custom-tabs-sub_packages-tab" data-toggle="pill" href="#custom-tabs-sub_packages-content-tab" role="tab" aria-controls="custom-tabs-sub_packages-tab" aria-selected="false">{{__('pages.sub_packages')}}</a>
                    </li>


                </ul>

                <div class="tab-content" id="custom-tabs-tabContent">
                    <!-- form start -->
                        <div class="tab-pane fade" id="custom-tabs-basic_info-content-tab" role="tabpanel" aria-labelledby="custom-tabs-basic_info-tab">
                            @include('dashboard.pages.partials.tours_edit_basic')
                        </div>
                        <div class="tab-pane fade" id="custom-tabs-features-content-tab" role="tabpanel" aria-labelledby="custom-tabs-features-tab">
                            @include('dashboard.pages.partials.tours_edit_features')
                        </div>
                        <div class="tab-pane fade" id="custom-tabs-custom-features-content-tab" role="tabpanel" aria-labelledby="custom-tabs-custom-features-tab">
                            @include('dashboard.pages.partials.tours_edit_custom_features')
                        </div>
                        <div class="tab-pane fade" id="custom-tabs-timeline-content-tab" role="tabpanel" aria-labelledby="custom-tabs-timeline-tab">
                            @include('dashboard.pages.partials.tours_edit_timeline')
                        </div>
                        <div class="tab-pane fade" id="custom-tabs-filters-content-tab" role="tabpanel" aria-labelledby="custom-tabs-filters-tab">
                            @include('dashboard.pages.partials.tours_edit_filters')
                        </div>
                        <div class="tab-pane fade" id="custom-tabs-packages-content-tab" role="tabpanel" aria-labelledby="custom-tabs-packages-tab">
                            @include('dashboard.pages.partials.tours_edit_packages')
                        </div>
                        <div class="tab-pane fade" id="custom-tabs-sub_packages-content-tab" role="tabpanel" aria-labelledby="custom-tabs-sub_packages-tab">
                            @include('dashboard.pages.partials.tours_edit_sub_packages')
                        </div>
                </div>
            </div>

 



    </section>
    <!-- /.content -->
</div>
<!-- /.content-wrapper -->
@endsection

@push('js_scripts')
<script>

    $(document).ready(function(){

    // DropzoneJS Demo Code Start
    Dropzone.autoDiscover = false

    // Get the template HTML and remove it from the doumenthe template HTML and remove it from the doument
    var previewNode = document.querySelector("#template")
    previewNode.id = ""
    var previewTemplate = previewNode.parentNode.innerHTML
    previewNode.parentNode.removeChild(previewNode)

    var myDropzone = new Dropzone(".dropzone_files", { // Make the whole body a dropzone
    url: "{{ Route('gallery.store') }}", // Set the url
    method: 'POST',
    headers: {
        'X-CSRF-TOKEN': "{{ csrf_token() }}"
    },
    init: function(e) {
        // add the uploaded images to dropzone
        var dz = this;
      
        this.on("success", function(file, response) {
            // Append the file name to a hidden input field
            if(response.gallery){
                $("form").append('<input type="hidden" name="file[]" value="' + response.gallery + '">');
            }
        });
    },
    thumbnailWidth: 80,
    thumbnailHeight: 80,
    parallelUploads: 20,
    previewTemplate: previewTemplate,
    autoQueue: false, // Make sure the files aren't queued until manually added
    previewsContainer: "#previews", // Define the container to display the previews
    clickable: ".fileinput-button" // Define the element that should be used as click trigger to select files.
    })

    myDropzone.on("addedfile", function(file) {
        // Hookup the start button
        if(file.uploaded){
            file.previewElement.querySelector(".start").setAttribute("disabled", "disabled")
        }
        file.previewElement.querySelector(".start").onclick = function() { myDropzone.enqueueFile(file) }
    })

    // Update the total progress bar
    myDropzone.on("totaluploadprogress", function(progress) {
    document.querySelector("#total-progress .progress-bar").style.width = progress + "%"
    })

    myDropzone.on("sending", function(file) {
        // Show the total progress bar when upload starts
        document.querySelector("#total-progress").style.opacity = "1"
        // And disable the start button
        file.previewElement.querySelector(".start").setAttribute("disabled", "disabled")
    })

    // Hide the total progress bar when nothing's uploading anymore
    myDropzone.on("queuecomplete", function(progress) {
    document.querySelector("#total-progress").style.opacity = "0"
    })

    // on delete file
    myDropzone.on("removedfile", function(file) {
        $("input[value='" + file.path + "']").remove();
    });

    // Setup the buttons for all transfers
    // The "add files" button doesn't need to be setup because the config
    // `clickable` has already been specified.
    document.querySelector("#actions .start").onclick = function() {
        myDropzone.enqueueFiles(myDropzone.getFilesWithStatus(Dropzone.ADDED))
    }
    document.querySelector("#actions .cancel").onclick = function() {
        myDropzone.removeAllFiles(true)
    }

    @foreach($gallery as $file)
        // Create the mock file:
        var mockFile = { path: '{{$file['path']}}' ,  status: Dropzone.QUEUED , size:  0 , accepted : true , uploaded : true };
        // Call the default addedfile event handler
        myDropzone.emit("addedfile", mockFile);
        // And optionally show the thumbnail of the file:
        myDropzone.emit("thumbnail", mockFile, "{{asset('storage/'.$file['path'])}}");
        myDropzone.emit("complete", mockFile);
    @endforeach

    // DropzoneJS Demo Code End

    });

    $(document).ready(function(){
       
    // handle tabs with url hash
        var hash = window.location.hash;
        if(hash){
            $('.tab-pane').removeClass('active show');
            $('.nav-link').removeClass('active');
            $('.nav-link[href="'+hash+'"]').addClass('active');
            $('.tab-pane'+hash).addClass('active show');
        }else{
            $('.nav-link').first().addClass('active');
            $('.tab-pane').first().addClass('active show');
        }

        
    });

    
</script>

<script>

    $('document').ready(function(){
        $('#custom-features-table').DataTable({
            ajax: {
                url: "{{ route('tours.custom_features.fetch', ['id' => $tour['id']]) }}",
                type: 'GET',
                dataSrc: '',
            },
            columns: [
                { data: 'id' },
                { data: 'title' },
                { data: 'content' },
                { data: 'id' }
            ],
            columnDefs: [
                {
                    targets: 3,
                    render: function(data, type, row){
                        return '<a href="#" class="btn btn-primary btn-sm" onclick="edit_feature('+data+')">{{__('pages.edit')}}</a> <button class="btn btn-danger btn-sm" onclick="confirmDeleteFeature('+data+')">{{__('pages.delete')}}</button>';
                    }
                }
            ],
            autoWidth: false,
            order: [[0, 'desc']] // Order by the first column (index 0) in descending order
        });
        $('#timeline-table').DataTable({
            ajax: {
                url: "{{ route('tours.timeline.fetch', ['id' => $tour['id']]) }}",
                type: 'GET',
                dataSrc: '',
            },
            columns: [
                { data: 'id' },
                { data: 'title' },
                { data: 'content' },
                { data: 'id' }
            ],
            columnDefs: [
                {
                    targets: 3,
                    render: function(data, type, row){
                        return '<a href="#" class="btn btn-primary btn-sm" onclick="edit_timeline('+data+')">{{__('pages.edit')}}</a> <button class="btn btn-danger btn-sm" onclick="confirmDeleteTimeline('+data+')">{{__('pages.delete')}}</button>';
                    }
                }
            ],
            autoWidth: false,
            order: [[0, 'desc']] // Order by the first column (index 0) in descending order
        });
        $('#package-table').DataTable({
            ajax: {
                url: "{{ route('tours.packages.fetch', ['id' => $tour['id']]) }}",
                type: 'GET',
                dataSrc: '',
            },
            columns: [
                { data: 'id' },
                { data: 'title' },
                { data: 'id' },
            ],
            columnDefs: [
                {
                    targets: 2,
                    render: function(data, type, row){
                        return '<a href="#" class="btn btn-primary btn-sm" onclick="edit_package('+data+')">{{__('pages.edit')}}</a> <button class="btn btn-danger btn-sm" onclick="confirmDeletePackage('+data+')">{{__('pages.delete')}}</button>';
                    }
                }
            ],
            autoWidth: false,
            order: [[0, 'desc']] // Order by the first column (index 0) in descending order
        });
        $('#sub_package-table').DataTable({
            ajax: {
                url: "{{ route('tours.sub_packages.fetch', ['id' => $tour['id']]) }}",
                type: 'GET',
                dataSrc: '',
            },
            columns: [
                { data: 'id' },
                { data: 'package_title' },
                { data: 'start_month' },
                { data: 'end_month' },
                { data: 'id' },
            ],
            columnDefs: [
                {
                    targets: 4,
                    render: function(data, type, row){
                        return '<a href="#" class="btn btn-primary btn-sm" onclick="edit_sub_package('+data+')">{{__('pages.edit')}}</a> <button class="btn btn-danger btn-sm" onclick="confirmDeleteSub_package('+data+')">{{__('pages.delete')}}</button>';
                    }
                }
            ],
            autoWidth: false,
            order: [[0, 'desc']] // Order by the first column (index 0) in descending order
        });
    });

    function add_new_feature(){
        // reset the form and hide the edit form
        $('form').each(function(){
            this.reset();
        });
        $('#edit_form_wrapper_custom_features').empty();
        $('#add_form_custom_features').show();
    }

    function store_new_feature(){
        var form = $('#add_form_custom_features'); // Select the form
      // disable all forms
        // delete all alerts
        $('.messages-list').empty();
        var url = form.attr('action');
        var data = form.serialize(); // Serialize the form data
        // add token
        data += '&_token={{ csrf_token() }}';
        form.find('input, select, button, textarea').attr('disabled', true);
        $.ajax({
            url: url,
            type: 'PUT',
            data: data,
            dataType: 'json',
            success: function(response){
                if(response.status == 'success'){
                    // add alerts in messages list
                    $('.messages-list').append('<div class="alert alert-success">'+response.message+'</div>');
                    // reload the table
                    $('#custom-features-table').DataTable().ajax.reload();
                    // reset the form
                    form[0].reset();
                }else{
                    // add each error in messages list as alert
                    if (response.responseJSON.errors) {
                        // Iterate over each error and append it to the .messages-list element
                        $.each(response.responseJSON.errors, function(key, value) {
                            $.each(value, function(k, v){
                                $('.messages-list').append('<div class="alert alert-danger">' + v + '</div>');
                            });
                        });
                    } else {
                        // add alerts in messages list
                        $('.messages-list').append('<div class="alert alert-danger">'+response.message+'</div>');
                    }
                }
            },
            error: function(response){   
                if (response.responseJSON.errors) {
                    // Iterate over each error and append it to the .messages-list element
                    $.each(response.responseJSON.errors, function(key, value) {
                        $.each(value, function(k, v){
                            $('.messages-list').append('<div class="alert alert-danger">' + v + '</div>');
                        });
                    });
                } else if(response.message){
                    // add alerts in messages list
                    $('.messages-list').append('<div class="alert alert-danger">'+response.message+'</div>');
                } else {
                    // add alerts in messages list
                    $('.messages-list').append('<div class="alert alert-danger">'+response+'</div>');
                }
            },
            complete: function(){
                // enable all forms
                form.find('input, select, button, textarea').attr('disabled', false);
                // scroll to the messages list
                $('.messages-list').get(0).scrollIntoView();
            }
        });
        return false;
    }

    function edit_feature(id){
        // reset the form and hide the add form
        $('form').each(function(){
            this.reset();
        });
        $('#add_form_custom_features').hide();
        $('#edit_form_wrapper_custom_features').empty();
         $('.messages-list').empty();
       // get the feature data
        $.ajax({
            url: "{{ url('dashboard/tours/custom_features') }}/"+id,
            type: 'GET',
            success: function(response){
                // add the edit form
                $('#edit_form_wrapper_custom_features').append(response);
            },
            error: function(response){
                if (response.responseJSON && response.responseJSON.errors) {
                    // Iterate over each error and append it to the .messages-list element
                    $.each(response.responseJSON.errors, function(key, value) {
                        $.each(value, function(k, v){
                            $('.messages-list').append('<div class="alert alert-danger">' + v + '</div>');
                        });
                    });
                } else if(response.message){
                    // add alerts in messages list
                    $('.messages-list').append('<div class="alert alert-danger">'+response.message+'</div>');
                } else {
                    console.log(response);
                    // add alerts in messages list
                    $('.messages-list').append('<div class="alert alert-danger">'+response+'</div>');
                }
            },
            complete: function(){
                // scroll to the messages list
                $('.messages-list').get(0).scrollIntoView();
            }
        });
    }

    function update_feature(form){
        var form = $('#edit_form_custom_features'); // Select the form
        // delete all alerts
        $('.messages-list').empty();
        var url = form.attr('action');
        var data = form.serialize(); // Serialize the form data
        // add token
        data += '&_token={{ csrf_token() }}';
        form.find('input, select, button, textarea').attr('disabled', true);
        $.ajax({
            url: url,
            type: 'POST',
            data: data,
            success: function(response){
                if(response.status == 'success'){
                    // add alerts in messages list
                    $('.messages-list').append('<div class="alert alert-success">'+response.message+'</div>');
                    // reload the table
                    $('#custom-features-table').DataTable().ajax.reload();
                }else{
                    // add each error in messages list as alert
                    if (response.responseJSON.errors) {
                        // Iterate over each error and append it to the .messages-list element
                        $.each(response.responseJSON.errors, function(key, value) {
                            $.each(value, function(k, v){
                                $('.messages-list').append('<div class="alert alert-danger">' + v + '</div>');
                            });
                        });
                    } else {
                        // add alerts in messages list
                        $('.messages-list').append('<div class="alert alert-danger">'+response.message+'</div>');
                    }
                }
            },
            error: function(response){
                if (response.responseJSON && response.responseJSON.errors) {
                    // Iterate over each error and append it to the .messages-list element
                    $.each(response.responseJSON.errors, function(key, value) {
                        $.each(value, function(k, v){
                            $('.messages-list').append('<div class="alert alert-danger">' + v + '</div>');
                        });
                    });
                } else if(response.message){
                    // add alerts in messages list
                    $('.messages-list').append('<div class="alert alert-danger">'+response.message+'</div>');
                } else {
                    // add alerts in messages list
                    $('.messages-list').append('<div class="alert alert-danger">'+response+'</div>');
                }
            },
            complete: function(){
                // enable all forms
                form.find('input, select, button, textarea').attr('disabled', false);
                // scroll to the messages list.
                $('.messages-list').get(0).scrollIntoView();
            }
        });
        return false;
    }

    function confirmDeleteFeature(id) {
        // Set the ID of the item to be deleted as a data attribute in the modal
        $('#deleteItemModalFeature').attr('data-item-id', id);
        // Show the modal
        $('#deleteItemModalFeature').modal('show');
    }

    // Bind click event to the confirmation button inside the modal
    $('#deleteItemModalFeature #confirmDeleteBtn').click(function() {
        // Construct the form action URL
        // Submit the form
        $('.messages-list').empty();
        $.ajax({
            url: "{{ url('dashboard/tours/custom_features') }}/"+$('#deleteItemModalFeature').attr('data-item-id'),
            type: 'DELETE',
            data: {
                _token: '{{ csrf_token() }}'
            },
            success: function(response){
                if(response.status == 'success'){
                    // add alerts in messages list
                    $('.messages-list').append('<div class="alert alert-success">'+response.message+'</div>');
                    // reload the table
                    $('#custom-features-table').DataTable().ajax.reload();
                }else{
                    // add alerts in messages list
                    $('.messages-list').append('<div class="alert alert-danger">'+response.message+'</div>');
                }
            },
            error: function(response){
                if (response.responseJSON && response.responseJSON.errors) {
                    // Iterate over each error and append it to the .messages-list element
                    $.each(response.responseJSON.errors, function(key, value) {
                        $.each(value, function(k, v){
                            $('.messages-list').append('<div class="alert alert-danger">' + v + '</div>');
                        });
                    });
                } else if(response.message){
                    // add alerts in messages list
                    $('.messages-list').append('<div class="alert alert-danger">'+response.message+'</div>');
                } else {
                    // add alerts in messages list
                    $('.messages-list').append('<div class="alert alert-danger">'+response+'</div>');
                }
            },
            complete: function(){
                // scroll to the messages list
                $('.messages-list').get(0).scrollIntoView();
            }
        });
        // Hide the modal after the operation
        $('#deleteItemModalFeature').modal('hide');
    });

 
    // start timeline
    function add_new_timeline(){
        // reset the form and hide the edit form
        $('form').each(function(){
            this.reset();
        });
        $('#edit_form_wrapper_timeline').empty();
        $('#add_form_timeline').show();
    }

    function store_new_timeline(){
        var form = $('#add_form_timeline'); // Select the form
      // disable all forms
        // delete all alerts
        $('.messages-list').empty();
        var url = form.attr('action');
        var data = form.serialize(); // Serialize the form data
        // add token
        data += '&_token={{ csrf_token() }}';
        form.find('input, select, button, textarea').attr('disabled', true);
        $.ajax({
            url: url,
            type: 'PUT',
            data: data,
            dataType: 'json',
            success: function(response){
                if(response.status == 'success'){
                    // add alerts in messages list
                    $('.messages-list').append('<div class="alert alert-success">'+response.message+'</div>');
                    // reload the table
                    $('#timeline-table').DataTable().ajax.reload();
                    // reset the form
                    form[0].reset();
                }else{
                    // add each error in messages list as alert
                    if (response.responseJSON.errors) {
                        // Iterate over each error and append it to the .messages-list element
                        $.each(response.responseJSON.errors, function(key, value) {
                            $.each(value, function(k, v){
                                $('.messages-list').append('<div class="alert alert-danger">' + v + '</div>');
                            });
                        });
                    } else {
                        // add alerts in messages list
                        $('.messages-list').append('<div class="alert alert-danger">'+response.message+'</div>');
                    }
                }
            },
            error: function(response){   
                if (response.responseJSON.errors) {
                    // Iterate over each error and append it to the .messages-list element
                    $.each(response.responseJSON.errors, function(key, value) {
                        $.each(value, function(k, v){
                            $('.messages-list').append('<div class="alert alert-danger">' + v + '</div>');
                        });
                    });
                } else if(response.message){
                    // add alerts in messages list
                    $('.messages-list').append('<div class="alert alert-danger">'+response.message+'</div>');
                } else {
                    // add alerts in messages list
                    $('.messages-list').append('<div class="alert alert-danger">'+response+'</div>');
                }
            },
            complete: function(){
                // enable all forms
                form.find('input, select, button, textarea').attr('disabled', false);
                // scroll to the messages list
                $('.messages-list').get(0).scrollIntoView();
            }
        });
        return false;
    }

    function edit_timeline(id){
        // reset the form and hide the add form
        $('form').each(function(){
            this.reset();
        });
        $('#add_form_timeline').hide();
        $('#edit_form_wrapper_timeline').empty();
         $('.messages-list').empty();
       // get the timeline data
        $.ajax({
            url: "{{ url('dashboard/tours/timeline') }}/"+id,
            type: 'GET',
            success: function(response){
                // add the edit form
                $('#edit_form_wrapper_timeline').append(response);
                initialize("edit");
            },
            error: function(response){
                if (response.responseJSON && response.responseJSON.errors) {
                    // Iterate over each error and append it to the .messages-list element
                    $.each(response.responseJSON.errors, function(key, value) {
                        $.each(value, function(k, v){
                            $('.messages-list').append('<div class="alert alert-danger">' + v + '</div>');
                        });
                    });
                } else if(response.message){
                    // add alerts in messages list
                    $('.messages-list').append('<div class="alert alert-danger">'+response.message+'</div>');
                } else {
                    console.log(response);
                    // add alerts in messages list
                    $('.messages-list').append('<div class="alert alert-danger">'+response+'</div>');
                }
            },
            complete: function(){
                // scroll to the messages list
                $('.messages-list').get(0).scrollIntoView();
            }
        });
    }

    function update_timeline(form){
        var form = $('#edit_form_timeline'); // Select the form
        // delete all alerts
        $('.messages-list').empty();
        var url = form.attr('action');
        var data = form.serialize(); // Serialize the form data
        // add token
        data += '&_token={{ csrf_token() }}';
        form.find('input, select, button, textarea').attr('disabled', true);
        $.ajax({
            url: url,
            type: 'POST',
            data: data,
            success: function(response){
                if(response.status == 'success'){
                    // add alerts in messages list
                    $('.messages-list').append('<div class="alert alert-success">'+response.message+'</div>');
                    // reload the table
                    $('#timeline-table').DataTable().ajax.reload();
                }else{
                    // add each error in messages list as alert
                    if (response.responseJSON.errors) {
                        // Iterate over each error and append it to the .messages-list element
                        $.each(response.responseJSON.errors, function(key, value) {
                            $.each(value, function(k, v){
                                $('.messages-list').append('<div class="alert alert-danger">' + v + '</div>');
                            });
                        });
                    } else {
                        // add alerts in messages list
                        $('.messages-list').append('<div class="alert alert-danger">'+response.message+'</div>');
                    }
                }
            },
            error: function(response){
                if (response.responseJSON && response.responseJSON.errors) {
                    // Iterate over each error and append it to the .messages-list element
                    $.each(response.responseJSON.errors, function(key, value) {
                        $.each(value, function(k, v){
                            $('.messages-list').append('<div class="alert alert-danger">' + v + '</div>');
                        });
                    });
                } else if(response.message){
                    // add alerts in messages list
                    $('.messages-list').append('<div class="alert alert-danger">'+response.message+'</div>');
                } else {
                    // add alerts in messages list
                    $('.messages-list').append('<div class="alert alert-danger">'+response+'</div>');
                }
            },
            complete: function(){
                // enable all forms
                form.find('input, select, button, textarea').attr('disabled', false);
                // scroll to the messages list.
                $('.messages-list').get(0).scrollIntoView();
            }
        });
        return false;
    }

    function confirmDeleteTimeline(id) {
        // Set the ID of the item to be deleted as a data attribute in the modal
        $('#deleteItemModalTimeline').attr('data-item-id', id);
        // Show the modal
        $('#deleteItemModalTimeline').modal('show');
    }

    // Bind click event to the confirmation button inside the modal
    $('#deleteItemModalTimeline #confirmDeleteBtn').click(function() {
        // Construct the form action URL
        // Submit the form
        $('.messages-list').empty();
        $.ajax({
            url: "{{ url('dashboard/tours/timeline') }}/"+$('#deleteItemModalTimeline').attr('data-item-id'),
            type: 'DELETE',
            data: {
                _token: '{{ csrf_token() }}'
            },
            success: function(response){
                if(response.status == 'success'){
                    // add alerts in messages list
                    $('.messages-list').append('<div class="alert alert-success">'+response.message+'</div>');
                    // reload the table
                    $('#timeline-table').DataTable().ajax.reload();
                }else{
                    // add alerts in messages list
                    $('.messages-list').append('<div class="alert alert-danger">'+response.message+'</div>');
                }
            },
            error: function(response){
                if (response.responseJSON && response.responseJSON.errors) {
                    // Iterate over each error and append it to the .messages-list element
                    $.each(response.responseJSON.errors, function(key, value) {
                        $.each(value, function(k, v){
                            $('.messages-list').append('<div class="alert alert-danger">' + v + '</div>');
                        });
                    });
                } else if(response.message){
                    // add alerts in messages list
                    $('.messages-list').append('<div class="alert alert-danger">'+response.message+'</div>');
                } else {
                    // add alerts in messages list
                    $('.messages-list').append('<div class="alert alert-danger">'+response+'</div>');
                }
            },
            complete: function(){
                // scroll to the messages list
                $('.messages-list').get(0).scrollIntoView();
            }
        });
        // Hide the modal after the operation
        $('#deleteItemModalTimeline').modal('hide');
    });

    // end timeline

    // start packages 
    function add_new_package(){
        // reset the form and hide the edit form
        $('form').each(function(){
            this.reset();
        });
        $('#edit_form_wrapper_package').empty();
        $('#add_form_package').show();
    }

    function store_new_package(){
        var form = $('#add_form_package'); // Select the form
      // disable all forms
        // delete all alerts
        $('.messages-list').empty();
        var url = form.attr('action');
        var data = form.serialize(); // Serialize the form data
        // add token
        data += '&_token={{ csrf_token() }}';
        form.find('input, select, button, textarea').attr('disabled', true);
        $.ajax({
            url: url,
            type: 'PUT',
            data: data,
            dataType: 'json',
            success: function(response){
                if(response.status == 'success'){
                    // add alerts in messages list
                    $('.messages-list').append('<div class="alert alert-success">'+response.message+'</div>');
                    // reload the table
                    // $('#package-table').DataTable().ajax.reload();
                    // reload page
                    location.reload();
                    // reset the form
                    form[0].reset();
                }else{
                    // add each error in messages list as alert
                    if (response.responseJSON.errors) {
                        // Iterate over each error and append it to the .messages-list element
                        $.each(response.responseJSON.errors, function(key, value) {
                            $.each(value, function(k, v){
                                $('.messages-list').append('<div class="alert alert-danger">' + v + '</div>');
                            });
                        });
                    } else {
                        // add alerts in messages list
                        $('.messages-list').append('<div class="alert alert-danger">'+response.message+'</div>');
                    }
                }
            },
            error: function(response){   
                if (response.responseJSON.errors) {
                    // Iterate over each error and append it to the .messages-list element
                    $.each(response.responseJSON.errors, function(key, value) {
                        $.each(value, function(k, v){
                            $('.messages-list').append('<div class="alert alert-danger">' + v + '</div>');
                        });
                    });
                } else if(response.message){
                    // add alerts in messages list
                    $('.messages-list').append('<div class="alert alert-danger">'+response.message+'</div>');
                } else {
                    // add alerts in messages list
                    $('.messages-list').append('<div class="alert alert-danger">'+response+'</div>');
                }
            },
            complete: function(){
                // enable all forms
                form.find('input, select, button, textarea').attr('disabled', false);
                // scroll to the messages list
                $('.messages-list').get(0).scrollIntoView();
            }
        });
        return false;
    }

    function edit_package(id){
        // reset the form and hide the add form
        $('form').each(function(){
            this.reset();
        });
        $('#add_form_package').hide();
        $('#edit_form_wrapper_package').empty();
         $('.messages-list').empty();
       // get the package data
        $.ajax({
            url: "{{ url('dashboard/tours/packages') }}/"+id,
            type: 'GET',
            success: function(response){
                // add the edit form
                $('#edit_form_wrapper_package').append(response);
            },
            error: function(response){
                if (response.responseJSON && response.responseJSON.errors) {
                    // Iterate over each error and append it to the .messages-list element
                    $.each(response.responseJSON.errors, function(key, value) {
                        $.each(value, function(k, v){
                            $('.messages-list').append('<div class="alert alert-danger">' + v + '</div>');
                        });
                    });
                } else if(response.message){
                    // add alerts in messages list
                    $('.messages-list').append('<div class="alert alert-danger">'+response.message+'</div>');
                } else {
                    console.log(response);
                    // add alerts in messages list
                    $('.messages-list').append('<div class="alert alert-danger">'+response+'</div>');
                }
            },
            complete: function(){
                // scroll to the messages list
                $('.messages-list').get(0).scrollIntoView();
            }
        });
    }

    function update_package(form){
        var form = $('#edit_form_package'); // Select the form
        // delete all alerts
        $('.messages-list').empty();
        var url = form.attr('action');
        var data = form.serialize(); // Serialize the form data
        // add token
        data += '&_token={{ csrf_token() }}';
        form.find('input, select, button, textarea').attr('disabled', true);
        $.ajax({
            url: url,
            type: 'POST',
            data: data,
            success: function(response){
                if(response.status == 'success'){
                    // add alerts in messages list
                    $('.messages-list').append('<div class="alert alert-success">'+response.message+'</div>');
                    // reload the table
                    // $('#package-table').DataTable().ajax.reload();
                    // reload page
                    location.reload();
                }else{
                    // add each error in messages list as alert
                    if (response.responseJSON.errors) {
                        // Iterate over each error and append it to the .messages-list element
                        $.each(response.responseJSON.errors, function(key, value) {
                            $.each(value, function(k, v){
                                $('.messages-list').append('<div class="alert alert-danger">' + v + '</div>');
                            });
                        });
                    } else {
                        // add alerts in messages list
                        $('.messages-list').append('<div class="alert alert-danger">'+response.message+'</div>');
                    }
                }
            },
            error: function(response){
                if (response.responseJSON && response.responseJSON.errors) {
                    // Iterate over each error and append it to the .messages-list element
                    $.each(response.responseJSON.errors, function(key, value) {
                        $.each(value, function(k, v){
                            $('.messages-list').append('<div class="alert alert-danger">' + v + '</div>');
                        });
                    });
                } else if(response.message){
                    // add alerts in messages list
                    $('.messages-list').append('<div class="alert alert-danger">'+response.message+'</div>');
                } else {
                    // add alerts in messages list
                    $('.messages-list').append('<div class="alert alert-danger">'+response+'</div>');
                }
            },
            complete: function(){
                // enable all forms
                form.find('input, select, button, textarea').attr('disabled', false);
                // scroll to the messages list.
                $('.messages-list').get(0).scrollIntoView();
            }
        });
        return false;
    }

    function confirmDeletePackage(id) {
        // Set the ID of the item to be deleted as a data attribute in the modal
        $('#deleteItemModalPackage').attr('data-item-id', id);
        // Show the modal
        $('#deleteItemModalPackage').modal('show');
    }

    // Bind click event to the confirmation button inside the modal
    $('#deleteItemModalPackage #confirmDeleteBtn').click(function() {
        // Construct the form action URL
        // Submit the form
        $('.messages-list').empty();
        $.ajax({
            url: "{{ url('dashboard/tours/packages') }}/"+$('#deleteItemModalPackage').attr('data-item-id'),
            type: 'DELETE',
            data: {
                _token: '{{ csrf_token() }}'
            },
            success: function(response){
                if(response.status == 'success'){
                    // add alerts in messages list
                    $('.messages-list').append('<div class="alert alert-success">'+response.message+'</div>');
                    // reload the table
                    // $('#package-table').DataTable().ajax.reload();
                    // reload page
                    location.reload();
                }else{
                    // add alerts in messages list
                    $('.messages-list').append('<div class="alert alert-danger">'+response.message+'</div>');
                }
            },
            error: function(response){
                if (response.responseJSON && response.responseJSON.errors) {
                    // Iterate over each error and append it to the .messages-list element
                    $.each(response.responseJSON.errors, function(key, value) {
                        $.each(value, function(k, v){
                            $('.messages-list').append('<div class="alert alert-danger">' + v + '</div>');
                        });
                    });
                } else if(response.message){
                    // add alerts in messages list
                    $('.messages-list').append('<div class="alert alert-danger">'+response.message+'</div>');
                } else {
                    // add alerts in messages list
                    $('.messages-list').append('<div class="alert alert-danger">'+response+'</div>');
                }
            },
            complete: function(){
                // scroll to the messages list
                $('.messages-list').get(0).scrollIntoView();
            }
        });
        // Hide the modal after the operation
        $('#deleteItemModalPackage').modal('hide');
    });

 
    // end packages

    // start sub_packagess 
    function add_new_sub_package(){
        // reset the form and hide the edit form
        $('form').each(function(){
            this.reset();
        });
        $('#edit_form_wrapper_sub_package').empty();
        $('#add_form_sub_package').show();
    }

    function store_new_sub_package(){
        var form = $('#add_form_sub_package'); // Select the form
      // disable all forms
        // delete all alerts
        $('.messages-list').empty();
        var url = form.attr('action');
        var data = form.serialize(); // Serialize the form data
        // add token
        data += '&_token={{ csrf_token() }}';
        form.find('input, select, button, textarea').attr('disabled', true);
        $.ajax({
            url: url,
            type: 'PUT',
            data: data,
            dataType: 'json',
            success: function(response){
                if(response.status == 'success'){
                    // add alerts in messages list
                    $('.messages-list').append('<div class="alert alert-success">'+response.message+'</div>');
                    // reload the table
                    $('#sub_package-table').DataTable().ajax.reload();
                    // reset the form
                    form[0].reset();
                }else{
                    // add each error in messages list as alert
                    if (response.responseJSON.errors) {
                        // Iterate over each error and append it to the .messages-list element
                        $.each(response.responseJSON.errors, function(key, value) {
                            $.each(value, function(k, v){
                                $('.messages-list').append('<div class="alert alert-danger">' + v + '</div>');
                            });
                        });
                    } else {
                        // add alerts in messages list
                        $('.messages-list').append('<div class="alert alert-danger">'+response.message+'</div>');
                    }
                }
            },
            error: function(response){   
                if (response.responseJSON.errors) {
                    // Iterate over each error and append it to the .messages-list element
                    $.each(response.responseJSON.errors, function(key, value) {
                        $.each(value, function(k, v){
                            $('.messages-list').append('<div class="alert alert-danger">' + v + '</div>');
                        });
                    });
                } else if(response.message){
                    // add alerts in messages list
                    $('.messages-list').append('<div class="alert alert-danger">'+response.message+'</div>');
                } else {
                    // add alerts in messages list
                    $('.messages-list').append('<div class="alert alert-danger">'+response+'</div>');
                }
            },
            complete: function(){
                // enable all forms
                form.find('input, select, button, textarea').attr('disabled', false);
                // scroll to the messages list
                $('.messages-list').get(0).scrollIntoView();
            }
        });
        return false;
    }

    function edit_sub_package(id){
        // reset the form and hide the add form
        $('form').each(function(){
            this.reset();
        });
        $('#add_form_sub_package').hide();
        $('#edit_form_wrapper_sub_package').empty();
         $('.messages-list').empty();
       // get the sub_packages data
        $.ajax({
            url: "{{ url('dashboard/tours/sub_packages',['tour_id' => $tour['id']]) }}/"+id,
            type: 'GET',
            success: function(response){
                // add the edit form
                $('#edit_form_wrapper_sub_package').append(response);
            },
            error: function(response){
                if (response.responseJSON && response.responseJSON.errors) {
                    // Iterate over each error and append it to the .messages-list element
                    $.each(response.responseJSON.errors, function(key, value) {
                        $.each(value, function(k, v){
                            $('.messages-list').append('<div class="alert alert-danger">' + v + '</div>');
                        });
                    });
                } else if(response.message){
                    // add alerts in messages list
                    $('.messages-list').append('<div class="alert alert-danger">'+response.message+'</div>');
                } else {
                    console.log(response);
                    // add alerts in messages list
                    $('.messages-list').append('<div class="alert alert-danger">'+response+'</div>');
                }
            },
            complete: function(){
                // scroll to the messages list
                $('.messages-list').get(0).scrollIntoView();
            }
        });
    }

    function update_sub_package(form){
        var form = $('#edit_form_sub_package'); // Select the form
        // delete all alerts
        $('.messages-list').empty();
        var url = form.attr('action');
        var data = form.serialize(); // Serialize the form data
        // add token
        data += '&_token={{ csrf_token() }}';
        form.find('input, select, button, textarea').attr('disabled', true);
        $.ajax({
            url: url,
            type: 'POST',
            data: data,
            success: function(response){
                if(response.status == 'success'){
                    // add alerts in messages list
                    $('.messages-list').append('<div class="alert alert-success">'+response.message+'</div>');
                    // reload the table
                    $('#sub_package-table').DataTable().ajax.reload();
                }else{
                    // add each error in messages list as alert
                    if (response.responseJSON.errors) {
                        // Iterate over each error and append it to the .messages-list element
                        $.each(response.responseJSON.errors, function(key, value) {
                            $.each(value, function(k, v){
                                $('.messages-list').append('<div class="alert alert-danger">' + v + '</div>');
                            });
                        });
                    } else {
                        // add alerts in messages list
                        $('.messages-list').append('<div class="alert alert-danger">'+response.message+'</div>');
                    }
                }
            },
            error: function(response){
                if (response.responseJSON && response.responseJSON.errors) {
                    // Iterate over each error and append it to the .messages-list element
                    $.each(response.responseJSON.errors, function(key, value) {
                        $.each(value, function(k, v){
                            $('.messages-list').append('<div class="alert alert-danger">' + v + '</div>');
                        });
                    });
                } else if(response.message){
                    // add alerts in messages list
                    $('.messages-list').append('<div class="alert alert-danger">'+response.message+'</div>');
                } else {
                    // add alerts in messages list
                    $('.messages-list').append('<div class="alert alert-danger">'+response+'</div>');
                }
            },
            complete: function(){
                // enable all forms
                form.find('input, select, button, textarea').attr('disabled', false);
                // scroll to the messages list.
                $('.messages-list').get(0).scrollIntoView();
            }
        });
        return false;
    }

    function confirmDeleteSub_package(id) {
        // Set the ID of the item to be deleted as a data attribute in the modal
        $('#deleteItemModalSub_package').attr('data-item-id', id);
        // Show the modal
        $('#deleteItemModalSub_package').modal('show');
    }

    // Bind click event to the confirmation button inside the modal
    $('#deleteItemModalSub_package #confirmDeleteBtn').click(function() {
        // Construct the form action URL
        // Submit the form
        $('.messages-list').empty();
        $.ajax({
            url: "{{ url('dashboard/tours/sub_packages') }}/"+$('#deleteItemModalSub_package').attr('data-item-id'),
            type: 'DELETE',
            data: {
                _token: '{{ csrf_token() }}'
            },
            success: function(response){
                if(response.status == 'success'){
                    // add alerts in messages list
                    $('.messages-list').append('<div class="alert alert-success">'+response.message+'</div>');
                    // reload the table
                    $('#sub_package-table').DataTable().ajax.reload();
                }else{
                    // add alerts in messages list
                    $('.messages-list').append('<div class="alert alert-danger">'+response.message+'</div>');
                }
            },
            error: function(response){
                if (response.responseJSON && response.responseJSON.errors) {
                    // Iterate over each error and append it to the .messages-list element
                    $.each(response.responseJSON.errors, function(key, value) {
                        $.each(value, function(k, v){
                            $('.messages-list').append('<div class="alert alert-danger">' + v + '</div>');
                        });
                    });
                } else if(response.message){
                    // add alerts in messages list
                    $('.messages-list').append('<div class="alert alert-danger">'+response.message+'</div>');
                } else {
                    // add alerts in messages list
                    $('.messages-list').append('<div class="alert alert-danger">'+response+'</div>');
                }
            },
            complete: function(){
                // scroll to the messages list
                $('.messages-list').get(0).scrollIntoView();
            }
        });
        // Hide the modal after the operation
        $('#deleteItemModalSub_package').modal('hide');
    });



    // end sub_packages

    $(document).on('change', 'select[name="country_id"]', function() {
        var country_id = $(this).val();
        if (country_id) {
            // disable all inputs 
            $('select,input').prop('disabled', true);
            $.ajax({
                url: "{{ Route('get_cities') }}",
                type: "GET",
                data: {
                    country_id: country_id
                },
                success: function(data) {
                    $('select[name="city_id[]"]').empty();
                    $('select[name="city_id[]"]').append('<option value="">{{__('pages.choose')}} {{__('pages.city')}}</option>');
                    $.each(data, function(key, item) {
                        $('select[name="city_id[]"]').append('<option value="' + item.id + '">' + item.name +
                            '</option>');
                    });
                },
                complete: function() {
                    // enable all inputs 
                    $('select,input').prop('disabled', false);
                }
            });
        } else {
            $('select[name="city_id[]"]').empty();
        }
    });

</script>

@endpush