@include('admin.layout.header')

<link rel="stylesheet" type="text/css" href="{{ asset('assets/css/datatables.min.css') }}" />
<link rel="stylesheet" href="{{ asset('assets/modules/select2/dist/css/select2.min.css') }}">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/venobox/2.0.4/venobox.min.css" />

<div class="modal fade" id="bannerModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle"
    aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="BannerMode">Add Banner</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                {!! Form::open([
                    'url' => '#',
                    'name' => 'bannerForm',
                    'id' => 'bannerForm',
                    'enctype' => 'multipart/form-data',
                ]) !!}
                <div class="row">
                    <div class="col-lg-12">
                        <input type="hidden" name="banner_id" id="banner_id">
                        <div class="form-group">
                            <label for="brand_name">Banner Name</label>
                            <input type="text" class="form-control" name="brand_name" placeholder="Enter Banner Name"
                                id="brand_name">
                        </div>
                        <div class="form-group">
                            <label for="banner_description">Banner Description</label>
                            <textarea class="form-control" name="banner_description" id="banner_description" rows="5" cols="5"
                                placeholder="Add Banner Description"></textarea>
                        </div>
                        <div class="form-group">
                            <label for="banner_image">Banner Images</label>
                            <div class="mb-3">
                                <img src="" id="bannerImage" alt="Banner Image" class="w-100 d-none img-fluid">
                            </div>
                            <div class="input-group">
                                <input type="file" id="banner_image" name="banner_image" class="border-1"
                                    accept="image/*">
                            </div>
                            <label id="banner_image-error" class="error" for="banner_image"></label>
                        </div>
                        <div class="form-group" id="slabsAmountDiv">
                            <label for="text">Slab Amount</label>
                            <div class="input-group mb-3">
                                <input type="text" class="form-control main-input" name="slab_amount[]"
                                    placeholder="Enter Slab Amount 1">
                                <span class="input-group-text add-slab" style="cursor: pointer;">
                                    <i class="fa fa-plus" style="font-size: 18px !important;"></i>
                                </span>
                            </div>
                            <label id="slab_amount[]-error" class="error" for="slab_amount[]">Slab amount is
                                required</label>
                        </div>
                        <div id="slab-wrapper"></div>
                        <div id="slabList"></div>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-outline-primary" data-dismiss="modal">Close</button>
                <button type="submit" class="btn btn-primary" id="bannerFormSubmit">Save</button>
            </div>
            {!! Form::close() !!}
        </div>
    </div>
</div>

<div class="main-content">
    <section class="section">
        <div class="section-header pr-0">
            <div class="row w-100">
                <div class="col-lg-3 col-md-6 my-auto">
                    <h1>View Banner</h1>
                </div>
                <div class="col-lg-auto my-2 my-md-2 my-lg-0 ml-auto">
                    <div class="btn btn-warning mr-2 my-2 my-md-2 my-lg-0" data-toggle="modal"
                        data-target="#bannerModal"><i class="fas fa-plus mr-2"
                            style="font-size: 14px!important;"></i>Add Banner</div>
                </div>
            </div>
        </div>

        <div class="row mb-5">
            <div class="col-lg-12">
                <div class="card">
                    <!-- <div class="card-header">
                    <h4>Striped</h4>
                  </div> -->
                    <div class="card-body">
                        <div class="">
                            <table class="w-100 table table-striped table-hover datatable text-center" id="datatable"
                                name="datatable">
                                <thead class="w-100">
                                    <tr>
                                        <th>Sr. No.</th>
                                        <th>Action</th>
                                        <th>Compiled View</th>
                                        <th>Banner Image</th>
                                        <th>Name</th>
                                        <th>Description</th>
                                        <th>Status</th>
                                    </tr>
                                </thead>
                                <tbody>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
</div>
@include('admin.layout.footer')

{{-- not in layout commated below --}}
{{-- <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script> --}}

<script src="{{ asset('assets/modules/select2/dist/js/select2.min.js') }}"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/venobox/2.0.4/venobox.min.js"></script>
<script src="{{ asset('assets/js/jquery.validate.min.js') }}"></script>
<script src="{{ asset('assets/js/additional-methods.min.js') }}"></script>
<script src="{{ asset('assets/notify.js') }}"></script>

<!-- JS Libraies -->
<script src="{{ asset('assets/modules/sweetalert/sweetalert.min.js') }}"></script>

<!-- Page Specific JS File -->
<script src="{{ asset('assets/js/page/modules-sweetalert.js') }}"></script>

{{-- <script>
    $('#chooseFile').bind('change', function() {
        var filename = $("#chooseFile").val();
        if (/^\s*$/.test(filename)) {
            $(".file-upload").removeClass('active');
            $("#noFile").text("No file chosen...");
        } else {
            $(".file-upload").addClass('active');
            $("#noFile").text(filename.replace("C:\\fakepath\\", ""));
        }
    });

    $('#chooseFile2').bind('change', function() {
        var filename = $("#chooseFile2").val();
        if (/^\s*$/.test(filename)) {
            $(".file-upload2").removeClass('active');
            $("#noFile2").text("No file chosen...");
        } else {
            $(".file-upload2").addClass('active');
            $("#noFile2").text(filename.replace("C:\\fakepath\\", ""));
        }
    });
</script> --}}

<script>
    let bannerDataTable;

    function editBannerSet(banner_id, brand_name, banner_image, banner_description, slabAmountsCSV) {
        $("#BannerMode").text("Edit Banner");

        $("#banner_id").val(banner_id);
        $("#brand_name").val(brand_name);

        $('#slabsAmountDiv').addClass('d-none');

        const slabAmounts = slabAmountsCSV.split(',').map(amount => amount.trim())
            .filter(amount => amount !== ''); // Remove empty strings

        if (slabAmounts.length > 0) {
            let tableHTML = '<table class="table table-bordered">';
            tableHTML +=
                '<thead><tr><th class="text-center">No</th><th class="text-center">Slab Amount</th></tr></thead><tbody>';

            slabAmounts.forEach((amount, index) => {
                tableHTML +=
                    `<tr><td class="text-center">${index + 1}</td><td class="text-center">${amount}</td></tr>`;
            });

            tableHTML += '</tbody></table>';

            $('#slabList').html(tableHTML);
        } else {
            $('#slabList').html(''); // Clear any existing content
        }

        let imageElement = $('#bannerImage'); // jQuery way to select the element
        let newImageUrl = '{{ asset('storage/banner_image/') }}' + '/' + banner_image; // Construct the new image URL

        // Set the src attribute and show the image
        imageElement.attr('src', newImageUrl).removeClass(
        'd-none'); // This will set the source and show the image if it was hidden

        $("#banner_description").val(banner_description);
    }

    function StatusChange(Id, status) {
        Swal.fire({
            title: "Are you sure?",
            icon: "info",
            html: `You want to change status?`,
            showCloseButton: true,
            showCancelButton: true,
            focusConfirm: false,
            confirmButtonText: `Yes`,
            cancelButtonText: `No`
        }).then((result) => {
            if (result.isConfirmed) {
                $.ajax({
                    url: "{{ route('updateBannerStatus') }}",
                    type: 'POST',
                    data: {
                        'banner_id': Id,
                        'status': status,
                        '_token': "{{ csrf_token() }}"
                    },
                    dataType: "json",
                    success: function(response) {
                        if (response.status == 1) {
                            $.notify(response.msg, "success");
                        } else {
                            $.notify(response.msg, "error");
                        }
                        bannerDataTable.draw();
                    },
                    error: function(jqXHR) {
                        $.notify(jqXHR.responseJSON.msg, "error");
                    }
                });
            }
        });
    }

    $(document).ready(function() {
        $('#bannerModal').on('hidden.bs.modal', function() {
            // Reset form fields
            $(this).find('form')[0].reset();

            // Reset hidden input specifically
            $('#banner_id').val('');

            // Reset select boxes to their default value (usually the first option)
            $(this).find('select').val('').trigger('change');

            $('#slabsAmountDiv').removeClass('d-none');

            $('#slabList').html('');

            // Reset other elements if needed
            $("#BannerMode").text("Add Banner"); // Reset the modal title
            $('#bannerImage').attr('src', '').addClass('d-none'); // Hide the image

            // Clear validation error messages and reset the form's validation state
            var form = $(this).find('form');
            form.validate().resetForm(); // Clears error messages
            form.find('.is-invalid').removeClass('is-invalid'); // Remove error class from input fields
        });

        let count = 2;

        $(document).on('click', '.add-slab', function() {
            // Change "+" to "-" for the current button
            $(this).removeClass('add-slab').addClass('remove-slab')
                .html('<i class="fa fa-minus" style="font-size: 18px !important;"></i>');

            // Get value from main input
            let value = $('.main-input').val();

            // Append new slab input with name attribute for validation
            $('#slab-wrapper').append(`
                <div class="input-group mb-3">
                    <input type="text" class="form-control slab-input" name="slab_amount[]" placeholder="Enter Slab Amount ${count}">
                    <span class="input-group-text add-slab" style="cursor: pointer;">
                        <i class="fa fa-plus" style="font-size: 18px !important;"></i>
                    </span>
                </div>
            `);

            count++;
        });

        // Remove slab when minus clicked
        $(document).on('click', '.remove-slab', function() {
            $(this).closest('.input-group').remove();
        });

        $.validator.addMethod("notOnlySpaces", function(value, element) {
            return $.trim(value).length > 0;
        }, "This field cannot contain only spaces.");

        $('#bannerForm').validate({
            ignore: ".ignore",
            rules: {
                brand_name: {
                    required: true,
                },
                banner_image: {
                    required: function() {
                        // Check if banner_id is empty (for add mode)
                        return $('#banner_id').val() === "";
                    },
                },
                banner_description: {
                    required: true,
                },
                'slab_amount[]': {
                    required: function() {
                        // Check if banner_id is empty (for add mode)
                        return $('#banner_id').val() === "";
                    },
                    notOnlySpaces: true
                    // ,number: true,
                    // min: 1
                }
            },
            messages: {
                banner_image: "Banner image is required",
                'slab_amount[]': {
                    required: "Slab amount is required",
                    number: "Please enter a valid number",
                    min: "Slab amount must be a positive number"
                }
            },
            // errorPlacement: function(error, element) {
            //     var placement = $(element).data('error');
            //     if (placement) {
            //         $(placement).append(error);
            //     } else {
            //         error.insertAfter(element.closest('.input-group'));
            //     }
            // },
            errorPlacement: function(error, element) {
                var placement = $(element).data('error');
                if (placement) {
                    $(placement).append(error)
                } else {
                    error.insertAfter(element);
                }
            },
            submitHandler: function(form) {
                $("#bannerFormSubmit").attr('disabled', true);
                var formData = new FormData($("#bannerForm")[0]);

                $.ajax({
                    url: '{{ route('upsertBanner') }}',
                    method: 'POST',
                    data: formData,
                    processData: false,
                    contentType: false,
                    headers: {
                        "X-CSRF-TOKEN": $('meta[name="csrf-token"]').attr("content"),
                    },
                    dataType: "json",
                    success: function(response) {
                        if (response.status == 1) {
                            $('#bannerModal').modal('hide');

                            $.notify(response.message, "success");
                            bannerDataTable.draw();
                        } else if (response.status == 0) {
                            $.notify(response.message, "error");
                        }
                        $("#bannerFormSubmit").attr('disabled', false);
                    },
                    error: function(xhr, status, error) {
                        console.error('An error occurred:', error);
                        $("#bannerFormSubmit").attr('disabled', false);
                    }
                });
            }
        });

        let columns = [{
                data: 'DT_RowIndex',
                name: 'DT_RowIndex',
                searchable: false,
                orderable: false,
            },
            {
                data: 'action',
                name: 'action',
                searchable: false,
                orderable: false,
            },
            {
                data: 'compiled_view',
                name: 'compiled_view',
                searchable: false,
                orderable: false,
            },
            {
                data: 'banner_image',
                name: 'banner_image',
                searchable: false,
                orderable: false,
            },
            {
                data: 'brand_name',
                name: 'brand_name'
            },
            {
                data: 'banner_description',
                name: 'banner_description',
                searchable: false,
                orderable: false,
            },
            {
                data: 'status',
                name: 'status',
                searchable: false,
                orderable: false,
            }
        ];

        let columnDefs = [{
            "width": "150",
            "targets": [4]
        }];

        getDataTable("{{ route('manageBannerPaginate') }}", columns, columnDefs);

        function getDataTable(url, columns, columnDefs) {
            if ($.fn.DataTable.isDataTable('#datatable')) {
                $('#datatable').DataTable().destroy();
            }
            bannerDataTable = $('#datatable').DataTable({
                processing: true,
                serverSide: true,
                "bDestroy": true,
                order: [],
                "scrollX": true,
                columns: columns,
                columnDefs: columnDefs,
                ajax: {
                    method: 'post',
                    url: url,
                    data: function(d) {
                        d._token = "{{ csrf_token() }}";
                    }
                },
                drawCallback: function(settings) {
                    // Reinitialize Venobox
                    new VenoBox({
                        selector: '.banner_image',
                        numeration: true,
                        infinigall: true,
                        share: true,
                        spinner: 'rotating-plane'
                    });
                }
            });
        }
    });
</script>