@php
    $backUrl = config('app.admin_url');
    if (in_array(request()->route()->getActionMethod(), ['edit'])) {
        $segment = 2;
    } else {
        $segment = 1;
    }
    if (count(request()->segments()) == 1) {
        $backUrl = route('dashboard');
    } else {
        $backUrl .= '/' . request()->segment(count(request()->segments()) - $segment);
    }
@endphp
<div class="col-12">
    <div class="ajax-message"></div>
</div>
@push('title-bar')
    <h5 class="card-title">
        <a href="{{ $backUrl }}" class="btn btn-back btn-sm me-2"><i class="bi bi-arrow-left"></i></a>{{ $name }}
        <span class="d-none">All</span>
        <div class="d-flex float-end">
            @if (Route::has($routeName . '.export') && isset($export))
                <form method="POST" id="records-export" action="{{ route($routeName . '.export') }}"
                    data-url="{{ route($routeName . '.export') }}">
                    @csrf
                    <a class="btn btn-danger btn-sm me-3" href=""
                        onclick="event.preventDefault(); this.closest('form').submit();">
                        <i class="fas fa-sign-out-alt fa-sm fa-fw mr-2 text-gray-400"></i>
                        Export
                    </a>
                </form>
            @endif
            @if (Route::has($routeName . '.import') && isset($import))
                <a href="" data-bs-toggle="modal" data-bs-target="#excel-import" class="btn btn-warning btn-sm me-3"
                    id="records-export">Import</a>
            @endif
            @if (Route::has($routeName . '.sorting') && isset($sorting))
                <a href="{{ route($routeName . '.sorting') }}" class="btn btn-success btn-sm me-3">Sorting</a>
            @endif
            @if (@$create)
                <a href="{{ route($routeName . '.create') }}" class="btn btn-primary btn-sm">Add New</a>
            @endif
            @if (@$submit)
                <button type="submit" class="btn btn-primary btn-sm">Submit</button>
            @endif
        </div>
    </h5>
    @if (@$searchBar)
        <div class="row g-0 my-2">
            <div class="col-6 col-sm-10">
                <input type="text" class="form-control shadow-none" name="search"
                    value="{{ request()->input('search') }}" placeholder="Search ..." autofocus>
            </div>
            <div class="col-6 col-sm-2">
                <select name="status" class="form-control shadow-none">
                    <option value="">-- View All --</option>
                    <option value="Active" {{ request()->input('status') == 'Active' ? 'selected' : '' }}>
                        Active</option>
                    <option value="Inactive" {{ request()->input('status') == 'Inactive' ? 'selected' : '' }}>
                        Inactive</option>
                </select>
            </div>
        </div>
    @endif
    @if (@$action)
        @if (Route::has($routeName . '.action'))
            <div class="row my-2 g-0 d-none" id="action-section">
                <div class="col-6 col-md-2">
                    <input type="text" id="counted" value="0 Selected" readonly disabled
                        class="form-control shadow-none">
                </div>
                <div class="col-6 col-md-2">
                    <select name="action" class="form-control shadow-none">
                        <option value="">-- More Action --</option>
                        <option value="Active">Active</option>
                        <option value="Inactive">Inactive</option>
                        <option value="Delete">Delete</option>
                    </select>
                </div>
            </div>
        @endif
    @endif
@endpush
@push('title-bar-form')
    <div class="col-12">
        <div class="card info-card sales-card p-0 mb-2">
            <div class="card-body py-0 my-0">
                <h5 class="card-title">
                    <a href="{{ $backUrl }}" class="btn btn-back btn-sm me-2"><i
                            class="bi bi-arrow-left"></i></a>{{ $name }}
                    <div class="d-flex float-end">
                        @if (@$submit)
                            <button type="submit" class="btn btn-primary btn-sm">Submit</button>
                        @endif
                    </div>
                </h5>
            </div>
        </div>
    </div>
@endpush

@push('import-modal')
    <div class="modal fade" id="excel-import" tabindex="-1" aria-labelledby="excel-import" aria-hidden="true"
        data-bs-backdrop="static">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Import {{ $name }}</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <form id="ajax-form-import" action="#" class="card shadow-none">
                        <div class="card-body">
                            <div class="row gy-2">
                                <div class="col-12">
                                    <div class="card-title">Select Excel file (.xlsx)*</div>
                                    <input type="file" name="file" class="form-control" accept=".xlsx">
                                </div>
                                <div class="col-12">
                                    <button type="submit" class="btn btn-primary shadow-sm float-end">Submit</button>
                                </div>
                                <div class="col-12">
                                    <div class="ajax-message-modal"></div>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
@endpush

@push('listing-script')
    <script>
        function delay(callback, ms) {
            var timer = 0;
            return function() {
                var context = this,
                    args = arguments;
                clearTimeout(timer);
                timer = setTimeout(function() {
                    callback.apply(context, args);
                }, ms || 0);
            };
        }
        @if (@$script)
            var requests = '';
            var page;
            var status;
            var search;

            $(wrapper).on('click', '.pagination a', function(event) {
                event.preventDefault();
                page = $(this).attr('href').split('page=')[1];
                fetchRecords();
            });

            $('[name="search"]').on('keyup', delay(function(e) {
                page = '';
                fetchRecords();
            }, 1000));

            $('[name="status"], [name="limit"]').on('change', function() {
                page = '';
                fetchRecords();
            });

            function getParams() {
                let inputs = {};

                status = $("[name=status]").val();
                search = $("[name=search]").val();
                limit = $("[name=limit]").val();

                if (page != "")
                    inputs.page = page;

                if (status != "")
                    inputs.status = status;

                if (search != "")
                    inputs.search = search;

                if (typeof(limit) !== "undefined")
                    inputs.limit = limit;

                let params = [];

                for (var key in inputs) {
                    if (inputs.hasOwnProperty(key)) {
                        params.push(key + "=" + encodeURIComponent(inputs[key]));
                    }
                }

                if (params.length)
                    requests = '?' + params.join("&");
                else
                    requests = '';
                @if (Route::has($routeName . '.export'))
                    let exportUrl = $("#records-export")
                    exportUrl.attr('action', exportUrl.data('url') + requests);
                @endif
                return requests;
            }
        @endif
        @if (Route::has($routeName . '.index'))
            function fetchRecords() {
                let params = getParams();

                let url = "{{ route($routeName . '.index') }}/";

                var obj = {
                    Title: "{{ $name }}",
                    Url: url + params
                };

                history.pushState(obj, obj.Title, obj.Url);

                if (params == "") {
                    url += '?ax=1';
                } else {
                    url += params + '&ax=1';
                }

                $.ajax({
                    url: url,
                    success: function(res) {
                        $('#ajax-data').html(res);
                    }
                });
            }
        @endif

        var ids = [];

        $(wrapper).on("click", ".all-items-select", function() {
            $('[type="checkbox"]').attr('checked', this.checked);
            countSelected();
        });

        $(wrapper).on("click", ".item-select", function() {
            countSelected();
        });

        function countSelected() {
            ids = $("tbody input:checkbox:checked").map(function() {
                return $(this).val();
            }).get();

            if (ids.length) {
                $("#counted").val(ids.length + ' Selected');
                $("#action-section").removeClass('d-none');
            } else {
                $("#counted").val('0 Selected');
                $("#action-section").addClass('d-none');
                $("#selectall").prop('checked', false);
            }

        }
        @if (Route::has($routeName . '.import'))
            $("#ajax-form-import").validate({
                rules: {
                    file: {
                        required: true,
                    },
                },
                messages: {
                    file: "*Please select a .csv file",
                },
                submitHandler: function(form) {

                    $(this).find('[type=submit]').attr('disabled', '');

                    $.ajax({
                        url: "{{ route($routeName . '.import') }}",
                        type: 'POST',
                        data: new FormData(form),
                        contentType: false,
                        processData: false,
                        beforeSend: function() {
                            $(ajaxMessageModal).html(
                                '<div class="alert alert-info"><i class="fa fa-refresh fa-spin"></i> Please wait... </div>'
                            );
                        },
                        success: function(res) {
                            $(ajaxMessageModal).html('<div class="alert alert-success">' + res
                                .message +
                                '</div>');
                            setTimeout(function() {
                                window.location.href =
                                    "{{ route($routeName . '.index') }}";
                            }, 1000);
                        },
                        complete: function() {
                            $(this).find('[type=submit]').removeAttr('disabled');
                            setTimeout(function() {
                                $(ajaxMessageModal).html('');
                            }, 20000);
                        },
                        error: function(data) {
                            let response = JSON.parse(data.responseText);
                            if (data.status === 422) {
                                let errorString = '<ul class="ps-3 m-0">';
                                $.each(response.errors, function(key, value) {
                                    errorString += '<li>' + value + '</li>';
                                });
                                errorString += '</ul>';
                                response = errorString;
                            } else {
                                response = response.error;
                            }

                            $(ajaxMessageModal).html('<div class="alert alert-danger">' + response +
                                '</div>');
                        }
                    });
                    return false;
                }
            });
        @endif
        @if (Route::has($routeName . '.action'))
            $('[name="action"]').on("change", function() {
                let actionValue = $(this).val();
                $.ajax({
                    url: "{{ route($routeName . '.action') }}",
                    type: 'POST',
                    data: {
                        ids: ids,
                        action: actionValue,
                    },
                    beforeSend: function() {
                        $(ajaxMessage).html(
                            '<div class="alert alert-info"><i class="fa fa-refresh fa-spin"></i> Please wait... </div>'
                        );
                    },
                    success: function(res) {
                        $(ajaxMessage).html('<div class="alert alert-success">' + res
                            .message +
                            '</div>');
                        ids = [];
                        $("#counted").val('0 Selected');
                        $('[name="action"]').val('');
                        $(".all-items-select").prop('checked', false);

                        page = '';
                        fetchRecords();
                    },
                    complete: function() {
                        $(this).find('[type=submit]').removeAttr('disabled');
                        setTimeout(function() {
                            $(ajaxMessage).html('');
                        }, 5000);
                    },
                    error: function(data) {
                        let response = JSON.parse(data.responseText);
                        if (data.status === 422) {
                            let errorString = '<ul class="ps-3 m-0">';
                            $.each(response.errors, function(key, value) {
                                errorString += '<li>' + value + '</li>';
                            });
                            errorString += '</ul>';
                            response = errorString;
                        } else {
                            response = response.error;
                        }

                        $(ajaxMessage).html('<div class="alert alert-danger">' + response +
                            '</div>');
                    }
                });
            });
        @endif
    </script>
@endpush
@push('sorting-script')
    @if (Route::has($routeName . '.sorting'))
        <script>
            $("#sorting").sortable({
                placeholder: "ui-state-highlight",
                update: function() {
                    sorting();
                },
            }).disableSelection();

            $("#ajax-form").validate({
                submitHandler: function(form) {

                    $(this).find('[type=submit]').attr('disabled', '');

                    $.ajax({
                        url: "{{ route($routeName . '.sorting') }}",
                        type: 'POST',
                        data: new FormData(form),
                        contentType: false,
                        processData: false,
                        beforeSend: function() {
                            $(ajaxMessage).html(
                                '<div class="alert alert-info"><i class="fa fa-refresh fa-spin"></i> Please wait... </div>'
                            );
                        },
                        success: function(res) {
                            $(ajaxMessage).html('<div class="alert alert-success">' + res.message +
                                '</div>');
                            setTimeout(function() {
                                window.location.href =
                                    "{{ route($routeName . '.index') }}";
                            }, 1000);
                        },
                        complete: function() {
                            $(this).find('[type=submit]').removeAttr('disabled');
                            setTimeout(function() {
                                $(ajaxMessage).html('');
                            }, 20000);
                        },
                        error: function(data) {
                            let response = JSON.parse(data.responseText);
                            if (data.status === 422) {
                                let errorString = '<ul class="ps-3 m-0">';
                                $.each(response.errors, function(key, value) {
                                    errorString += '<li>' + value + '</li>';
                                });
                                errorString += '</ul>';
                                response = errorString;
                            } else {
                                response = response.error;
                            }

                            $(ajaxMessage).html('<div class="alert alert-danger">' + response +
                                '</div>');
                        }
                    });
                    return false;
                }
            });
        </script>
    @endif
@endpush

@push('media-script')
    @if (Route::has($routeName . '.media'))
        <script>
            $(wrapper).on("click", ".destroy-media", function() {
                let selector = $(this);
                let id = selector.data('id');
                let media = selector.data('media');
                Swal.fire({
                    title: 'Are you sure?',
                    text: "You won't be able to revert this!",
                    icon: 'warning',
                    showCancelButton: true,
                    confirmButtonColor: '#3085d6',
                    cancelButtonColor: '#d33',
                    confirmButtonText: 'Yes, delete it!'
                }).then((result) => {
                    if (result.isConfirmed) {

                        $.ajax({
                            url: "{{ route($routeName . '.media') }}",
                            type: 'POST',
                            data: {
                                id: id,
                                media: media
                            },
                            success: function(res) {
                                selector.parent().remove();
                            },
                            error: function(data) {
                                let response = JSON.parse(data.responseText);
                                if (data.status === 422) {
                                    let errorString = '<ul class="ps-3 m-0">';
                                    $.each(response.errors, function(key, value) {
                                        errorString += '<li>' + value + '</li>';
                                    });
                                    errorString += '</ul>';
                                    response = errorString;
                                } else {
                                    response = response.error;
                                }

                                Swal.fire({
                                    icon: 'error',
                                    title: 'Oops...',
                                    text: response
                                });
                            }
                        });
                    }
                });
            });
        </script>
    @endif
@endpush

@push('text-area')
    @include('admin.components.textarea', ['textarea' => 'textarea'])
@endpush
@push('select2')
    <style>
        .select2-selection__clear {
            padding: 1.25em !important;
        }
    </style>
    <script>
        $('.select2').select2({
            theme: 'bootstrap-5',
            allowClear: true,
        });
        // $(document).on('select2:open', () => {
        //     document.querySelector('.select2-search__field').focus();
        // });
    </script>
@endpush

@push('ratings')
    <link href="{{ asset('admin') }}/css/star-rating.css" rel="stylesheet">
    <script src="{{ asset('admin') }}/js/star-rating.min.js"></script>
    <script>
        new StarRating('.star-rating');
    </script>
@endpush

@push('media')
    <div class="card info-card sales-card">
        <div class="card-body">
            <div class="card-title">Media</div>
            <div class="row">
                <div class="col-12">
                    <div id="images"></div>
                </div>
            </div>
        </div>
    </div>
@endpush

@push('image-uploader')
    <link href="{{ asset('admin') }}/css/image-uploader.min.css" rel="stylesheet">
    <script src="{{ asset('admin') }}/js/image-uploader.min.js"></script>
    <script>
        var deleteImageIds = [];
        @include('admin.components.image-uploader', ['imagesInputName' => 'images'])
    </script>
@endpush
<script src="https://cdn.socket.io/4.7.0/socket.io.min.js"></script>
@push('image-uploader-sorting')
    $('.uploaded').sortable();
    $(".delete-image").on("click", function() {
    deleteImageIds.push($(this).siblings('input').val());
    });
@endpush

@push('get-text-area')
    formdata.append("description", $('#textarea').summernote('code'));
@endpush

@push('call-ajax')
    @if (Route::has($routeName . '.store'))
        $.ajax({
        url: "{{ route($routeName . '.store') }}",
        type: 'POST',
        data: formdata,
        contentType: false,
        processData: false,
        beforeSend: function() {
        $(ajaxMessage).html(
        '<div class="alert alert-info"><i class="fa fa-refresh fa-spin"></i> Please wait... </div>'
        );
        },
        success: function(res) {
        $(ajaxMessage).html('<div class="alert alert-success">' + res.message +
            '</div>');
        @if ($routeName . '.store' == 'orders.store' || $routeName . '.store' == 'partner-orders.store')
            try {
            let socket = io('https://socket.chooseataxi.in/order', {
            auth: {
            token: '{{ session('token') }}'
            }
            });

            socket.on('connect', () => {
            console.log('✅ Connected successfully!', 'success');
            socket.emit('order:create:web', {order_id: res.data.order.id});
            });

            socket.on('disconnect', () => {
            console.log('❌ Disconnected', 'error');
            });

            socket.on('connect_error', (error) => {
            console.log('❌ Connection error: ' + error.message, 'error');
            });

            socket.on('error', (data) => {
            console.log('❌ Server error: ' + JSON.stringify(data), 'error');
            });

            {{-- socket.on('booking:new', (data) => {
            console.log('🚗 Booking new: ' + JSON.stringify(data), 'success');
            });

            socket.on('booking:created', (data) => {
            console.log('🚗 Booking created: ' + JSON.stringify(data), 'success');
            }); --}}

            } catch (error) {
            console.log('❌ Error connecting: ' + error.message, 'error');
            }
            {{-- window.location.href = "{{ route($routeName . '.index') }}"; --}}
        @endif
        setTimeout(function() {
        {{-- window.location.reload(); --}}
        window.location.href = "{{ route($routeName . '.index') }}";
        }, 1000);
        },
        complete: function() {
        $(this).find('[type=submit]').removeAttr('disabled');
        setTimeout(function() {
        $(ajaxMessage).html('');
        }, 20000);
        },
        error: function(data) {
        let response = JSON.parse(data.responseText);
        if (data.status === 422) {
        let errorString = '<ul class="ps-3 m-0">';
        $.each(response.errors, function(key, value) {
        errorString += '<li>' + value + '</li>';
        });
        errorString += '</ul>';
        response = errorString;
        } else {
        response = response.message;
        }

        $(ajaxMessage).html('<div class="alert alert-danger">' + response +
            '</div>');
        }
        });
    @endif
@endpush

@push('image-alt-view')
    <div class="offcanvas offcanvas-end" tabindex="-1" id="off-canvas-img-alt" aria-labelledby="off-canvas-label">
        <div class="offcanvas-header">
            <h5 id="off-canvas-label">Update image alt</h5>
            <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
        </div>
        <div class="offcanvas-body">
            <form class="row gy-3" id="ajax-form-alt-img">
                <div class="text-center col-12">
                    <img src="" alt="" class="img-fluid">
                </div>
                <div class="col-12">
                    <label class="form-label">Edit alt</label>
                    <input type="text" class="form-control" name="img_alt" value="">
                </div>
                <div class="col-12">
                    <button type="submit" class="float-end btn btn-primary btn-sm w-100">Submit</button>
                </div>
                <div class="col-12">
                    <div class="ajax-maessage-alt-img"></div>
                </div>
            </form>
        </div>
    </div>
@endpush
@push('image-alt-method')
    var imgSelector, altSelector, altModalSelector, altMediaId;

    $('img').on("click", function() {
    imgSelector = $(this);
    altMediaId = imgSelector.data('img-id');
    let altSrc = imgSelector.attr('src');
    if (typeof altMediaId !== 'undefined' && altSrc != "") {
    altSelector = $("#off-canvas-img-alt");
    altSelector.find('img').attr('src', altSrc);
    $('[name="img_alt"]').val(imgSelector.attr('alt'));
    altModalSelector = new bootstrap.Offcanvas(altSelector);
    altModalSelector.show();
    }
    });

    $("#ajax-form-alt-img").validate({
    rules: {
    name: {
    required: true,
    },
    },
    messages: {
    name: "*Please enter img alt name",
    },
    submitHandler: function(form) {

    $(this).find('[type=submit]').attr('disabled', '');

    let formdata = new FormData(form);

    formdata.append("id", altMediaId);

    $.ajax({
    url: "{{ route('media.name') }}",
    type: 'POST',
    data: formdata,
    contentType: false,
    processData: false,
    beforeSend: function() {
    $(".ajax-maessage-alt-img").html(
    '<div class="alert alert-info"><i class="fa fa-refresh fa-spin"></i> Please wait... </div>'
    );
    },
    success: function(res) {
    $(".ajax-maessage-alt-img").html('<div class="alert alert-success">' + res
        .message +
        '</div>');
    imgSelector.attr('alt', $('[name="img_alt"]').val());
    setTimeout(function() {
    altModalSelector.hide();
    }, 2000);
    },
    complete: function() {
    $(this).find('[type=submit]').removeAttr('disabled');
    setTimeout(function() {
    $(".ajax-maessage-alt-img").html('');
    }, 2000);
    },
    error: function(data) {
    let response = JSON.parse(data.responseText);
    if (data.status === 422) {
    let errorString = '<ul class="ps-3 m-0">';
    $.each(response.errors, function(key, value) {
    errorString += '<li>' + value + '</li>';
    });
    errorString += '</ul>';
    response = errorString;
    } else {
    response = response.message;
    }

    $(".ajax-maessage-alt-img").html('<div class="alert alert-danger">' +
        response +
        '</div>');
    }
    });

    return false;
    }
    });
@endpush

@push('image-uploader-asset')
    for (let i = 0; i < deleteImageIds.length; i++){ formdata.append("delete_image_ids[]", deleteImageIds[i]); } var
        imagesIds=[]; imagesIds=$('[name="images_old[]" ]').map(function() { return $(this).val(); }).get(); for (let j=0; j
    < imagesIds.length; j++){ formdata.append("images_ids[]", imagesIds[j]); } @endpush