@include('admin.layout.header')

<div class="container-fluid">
    <!--  Row 1 -->
    <div class="row g-2">

        <div class="col-auto col-lg-auto col-md-auto col-sm-auto my-auto">
            <h2 class="main_title">Manage Banner</h2>
        </div>
        <div class="col-auto col-lg-auto col-md-auto col-sm-auto ms-auto ms-auto">
            <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#bannerModal">
                <i class="fa-solid fa-plus me-2"></i> Add Banner
            </button>
        </div>
    </div>

    <div class="row mb-3">
    </div>


    <div class="row">
        <div class="col-12">
            <div class="white_shadow_rs">
                <table id="datatable" name="datatable" class="table table-striped data-table-dr" style="width:100%">
                    <thead>
                        <tr>
                            <th>Sr No</th>
                            <th>Banner Name</th>
                            <th>Banner File</th>
                            <th>Status</th>
                            <th>Edit</th>
                            <th>Date And Time</th>
                        </tr>
                    </thead>
                    <tbody>
                    <tbody>
                </table>
            </div>
        </div>
    </div>
</div>

</div>

{{-- Brand Modal --}}
<div class="modal fade" id="bannerModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h1 class="modal-title fs-5" id="bannerOperationStatus">Add Banner</h1>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            {!! Form::open([
                'url' => '#',
                'name' => 'bannerForm',
                'id' => 'bannerForm',
                'enctype' => 'multipart/form-data',
            ]) !!}
            <div class="modal-body">
                <input type="hidden" name="banner_id" id="banner_id">
                <div class="mb-3">
                    <label for="banner_name" class="form-label">Banner Name</label>
                    <input type="text" class="form-control" id="banner_name" name="banner_name"
                        placeholder="Enter Brand Name">
                </div>
                <div class="mb-3">
                    <label for="banner_file" class="form-label">Banner File</label>
                    <div class="custom_file_btn">
                        <div class="left">
                            <input type="file" class="form-control" id="banner_file" name="banner_file"
                                accept="image/*" onchange="previewImage()">
                            <span>Choose File</span>
                        </div>
                        <input type="hidden" id="banner_file_name" name="banner_file_name">
                        <div class="right">
                            <img id="banner_preview" src="./assets/images/logo.png"
                                style="display: none; max-width: 100%; height: auto;">
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal-footer justify-content-center">
                <button type="submit" class="btn btn-primary" id="bannerFormSubmit">Submit</button>
            </div>
            {!! Form::close() !!}
        </div>
    </div>
</div>

@include('admin.layout.footer')
<script src="{{ asset('admin/assets/js/jquery.validate.min.js') }}"></script>
<script src="{{ asset('admin/assets/js/additional-methods.min.js') }}"></script>
<script src="{{ asset('notify.js') }}"></script>

<script>
    function previewImage() {
        const fileInput = document.getElementById('banner_file');
        const fileNameInput = document.getElementById('banner_file_name');
        const preview = document.getElementById('banner_preview');

        const file = fileInput.files[0];

        if (file) {
            const validImageTypes = ['image/jpeg', 'image/png', 'image/gif', 'image/webp'];

            if (!validImageTypes.includes(file.type)) {
                $.notify(response.msg, "error");

                alert('Please select a valid image file (JPG, PNG, GIF, WEBP).');
                fileInput.value = ''; // Clear the file input
                preview.src = './assets/images/logo.png'; // Reset to default image
                preview.style.display = 'none'; // Hide the preview
                fileNameInput.value = ''; // Clear the file name input
                return;
            }

            const reader = new FileReader();
            reader.onload = function(e) {
                preview.src = e.target.result;
                preview.style.display = 'block'; // Show the preview
            }
            reader.readAsDataURL(file);

            // Save the file name in the hidden input
            fileNameInput.value = file.name;
        } else {
            preview.src = './assets/images/logo.png'; // Default image
            preview.style.display = 'none'; // Hide the preview
            fileNameInput.value = ''; // Clear the file name input
        }
    }


    function editBannerSet(banner_id, banner_name, banner_file) {
    $("#bannerOperationStatus").text("Edit banner");
    $("#banner_id").val(banner_id);
    $("#banner_name").val(banner_name);

    // Construct the banner file path correctly in JavaScript
    var bannerFilePath = banner_file ? '{{ asset('storage') }}' + '/' + banner_file : './assets/images/logo.png';
    $('#banner_preview').attr('src', bannerFilePath).show();
    $('#banner_file_name').val(banner_file);
    $('#bannerModal').modal('show');
}



    function bannerStatusChange(banner_id) {
        $.ajax({
            url: "{{ route('updateBannerStatus') }}",
            type: 'POST',
            data: {
                'banner_id': banner_id,
                '_token': "{{ csrf_token() }}"
            },
            dataType: "json",
            success: function(response) {
                if (response.status == 1) {
                    $.notify(response.msg, "success");
                    $('#datatable').DataTable().ajax.reload();
                } else {
                    $.notify(response.msg, "error");
                }
            },
            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();

            $("#bannerOperationStatus").text("Add Banner"); // Reset the modal title
            $('#brand_id').val('');
            var form = $(this).find('form');
            form.validate().resetForm(); // Clears error messages
            form.find('.is-invalid').removeClass('is-invalid'); // Remove error class from input fields
        });



        $('#bannerForm').validate({
            ignore: ".ignore",
            rules: {
                banner_name: {
                    required: true,
                },
                banner_file: {
                    required: function() {
                        return $('#banner_file_name').val() === '';
                    },
                },
            },
            messages: {},
            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.msg, "success");
                            $('#datatable').DataTable().ajax.reload();
                        } else if (response.status == 0) {
                            $.notify(response.msg, "error");
                        }
                        $("#bannerFormSubmit").attr('disabled', false);
                    },
                    error: function(xhr, status, error) {
                        console.error('An error occurred:', error);
                        $("#bannerFormSubmit").attr('disabled', false);
                        $.notify('An unexpected error occurred. Please try again.',
                            "error");
                    }
                });
            }
        });


        $(function() {
            var columns = [{
                    data: 'DT_RowIndex',
                    name: 'DT_RowIndex'
                },
                {
                    data: 'banner_name',
                    name: 'banner_name'
                },
                {
                    data: 'banner_file',
                    name: 'banner_file'
                },
                {
                    data: 'status',
                    name: 'status'
                },
                {
                    data: 'edit',
                    name: 'edit'
                },
                {
                    data: 'created_at',
                    name: 'created_at'
                }
            ];
            var columnDefs = [{
                "width": "150",
                "targets": [5]
            }];
            getdatatable("{{ route('manageBannerPaginate') }}", columns, columnDefs);
        });

        function getdatatable(url, columns, columnDefs) {
            if ($.fn.DataTable.isDataTable('#datatable')) {
                $('#datatable').DataTable().destroy();
            }
            $('#datatable').DataTable({
                processing: true,
                serverSide: true,
                pageLength: 25,
                "bDestroy": true,
                order: [],
                "scrollX": true,
                columns: columns,
                columnDefs: columnDefs,
                ajax: {
                    method: 'post',
                    url: url,
                    data: function(d) {
                        d._token = "{{ csrf_token() }}";
                    }
                },
                "drawCallback": function(settings) {
                    new VenoBox({
                        selector: '.venobox_img',
                    });
                }
            });
        }
    });
</script>