@extends('admin/app/layout')
@section('content')
    <div class="container-fluid">
        <div class="row justify-content-end mb-0">
            <div class="col-lg-auto  col-md-auto col-sm-auto my-auto col-12 text-center">
                <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#add_banner"
                    id="addBannerBtn"><i class="fa-solid fa-plus me-2"></i>Add Banner</button>
            </div>
        </div>

        <div class="row">
            <div class="col-12">
                <div class="white_table">
                    <table class="table table-striped datatable" id="manageBanner" style="width:100%">
                        <thead>
                            <tr>
                                <th>Sr No</th>
                                <th>Slider Name</th>
                                <th>Slider Image</th>
                                <th>Status</th>
                                <th>Action</th>
                                <th>Date And Time</th>
                            </tr>
                        </thead>
                        <tbody>
                            {{-- <tr>
                                <td>01</td>
                                <td>Watch </td>
                                <td>
                                    <div class="d-flex justify-content-center">
                                        <a class="my-image-links" href="../assets/images/view.png"><img
                                                src="../assets/images/view.png" width="30px"></a>
                                    </div>
                                </td>
                                <td>
                                    <div class="toggle">
                                        <input type="checkbox">
                                        <label></label>
                                    </div>
                                </td>
                                <td>
                                    <div class="d-flex justify-content-center">
                                        <button type="button" class="btn btn-outline-primary small_bt"
                                            data-bs-toggle="modal" data-bs-target="#add_banner">
                                            <i class="fa-regular fa-pen-to-square"></i>
                                        </button>
                                        <button type="button" class="btn ms-2 btn-outline-danger small_bt">
                                            <i class="fa-regular fa-trash-can"></i>
                                        </button>
                                    </div>
                                </td>
                                <td>
                                    <p class="mb-0">
                                        <span class="d-flex justify-content-center align-items-center"><i
                                                class="fa fa-calendar-alt me-2"></i>27/03/2021<br></span>
                                        <span class="d-flex justify-content-center align-items-center time_span"><i
                                                class="fa fa-clock me-2"></i>07:00AM</span>
                                    </p>
                                </td>
                            </tr> --}}
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>

    {{-- <div class="modal fade" id="add_banner" aria-hidden="true" aria-labelledby="exampleModalToggleLabel" tabindex="-1">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title fs-5" id="exampleModalLabel">Add Banner </h4>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"><i
                            class="fa-solid fa-xmark"></i></button>
                </div>
                <div class="modal-body">
                    <div class="row">
                        <div class="col-lg-12 col-md-12 col-sm-12 col-12">
                            <div class="mb-3">
                                <label for="" class="form-label">Banner Name <span class="red_star">*</span></label>
                                <input type="text" class="form-control br_from" id=""
                                    placeholder="Enter Banner name">
                            </div>
                        </div>
                        <div class="col-lg-12">
                            <div class="mb-3">
                                <label for="" class="form-label">Banner <span class="red_star">*</span></label>
                                <div class="row">
                                    <div class="col-12">
                                        <div class="item">
                                            <div class="upload_photo">
                                                <span>
                                                    <img src="{{ asset('admin-assets/images/upload.png') }}">
                                                </span>
                                                <p class="m-0">Drop Files Here Or Browse Files</p>
                                                <small class="m-0">Image Resolution: 1920 x 514 px </small>
                                                <input type="file">
                                            </div>
                                        </div>
                                    </div>
                                </div>

                            </div>
                        </div>

                        <div class="col-lg-12 text-center">
                            <div class="mb-3">
                                <button type="button" class="btn btn-primary">Submit</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div> --}}

    <div class="modal fade" id="add_banner" aria-hidden="true" tabindex="-1">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title fs-5" id="bannerModalLabel">Add Banner</h4>
                    <button type="button" class="btn-close" data-bs-dismiss="modal">
                        <i class="fa-solid fa-xmark"></i>
                    </button>
                </div>
                <div class="modal-body">
                    <form id="validateBannerForm" enctype="multipart/form-data">
                        @csrf
                        <input type="hidden" name="banner_id" id="banner_id">
                        <div class="col-lg-12 col-md-12 col-sm-12 col-12">
                            <div class="mb-3">
                                <label class="form-label">Banner Name <span class="red_star">*</span></label>
                                <input type="text" name="banner_name" id="banner_name" class="form-control br_from"
                                    placeholder="Enter Banner name">
                            </div>
                        </div>
                        <div class="col-lg-12">
                            <div class="mb-3">
                                <label class="form-label">Banner <span class="red_star">*</span></label>
                                <div class="upload_photo">
                                    <span>
                                        <img src="{{ asset('admin-assets/images/upload.png') }}" id="previewImage"
                                            width="100">
                                    </span>
                                    <p class="m-0">Drop Files Here Or Browse Files</p>
                                    <small class="m-0">Image Resolution: 1920 x 514 px</small>
                                    <input type="file" name="banner_image" id="banner_image">
                                </div>
                            </div>

                            <div class="col-lg-12 text-center">
                                <div class="mb-3">
                                    <button type="button" class="btn btn-primary" id="bannerSubmit">Submit</button>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
@endsection
@section('js')
    <script>
        $(function() {
            var html = []
            for (var i = 0; i < 10; i++) {
                html.push('<option value="' + i + '">' + i + '</option>')
            }
            $('#select').html(html.join('')).multipleSelect({
                filter: true,
                placeholder: 'Product Size'
            })
        })
    </script>

    <script>
        $('#addBannerBtn').on('click', function(e) {
            e.preventDefault();

            $('#validateBannerForm')[0].reset();
            $('#validateBannerForm').find('.error').each(function() {
                if ($(this).is('label')) {
                    $(this).remove();
                } else {
                    $(this).removeClass('error');
                }
            });


            $("#bannerModalLabel").text("Add Banner");
            $('#banner_id').val('');
            $('#banner_name').val('');
            $('#banner_image').val('');
            $('#previewImage').attr('src', "{{ asset('admin-assets/images/upload.png') }}");
            $('.upload_photo').removeClass('add_banner');

            $('#add_banner').modal('show');

        });
    </script>
    <script>
        $(document).ready(function() {
            $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                }
            });

            // Custom validator to disallow empty spaces
            $.validator.addMethod("noSpaces", function(value, element) {
                return this.optional(element) || $.trim(value).length > 0;
            }, "Please enter valid text, not just spaces.");

            // Initialize validation
            $('#validateBannerForm').validate({
                rules: {
                    banner_name: {
                        required: true,
                        noSpaces: true
                    },
                    banner_image: {
                        required: function() {
                            return $('#banner_id').val() === ''; // Required only for new banner
                        }
                    }
                },
                messages: {
                    banner_name: "Banner name is required",
                    banner_image: "Please upload a banner image"
                },
                errorPlacement: function(error, element) {
                    error.insertAfter(element);
                }
            });

            // Submit form via AJAX
            $('#bannerSubmit').on('click', function(e) {
                e.preventDefault();

                if ($('#validateBannerForm').valid()) {
                    let formData = new FormData($('#validateBannerForm')[0]);

                    $.ajax({
                        url: "{{ route('banner.store') }}", // Create this route
                        type: "POST",
                        data: formData,
                        processData: false,
                        contentType: false,
                        success: function(response) {
                            if (response.success) {
                                $.notify(response.message, "success");
                                $('#add_banner').modal('hide');
                                $('#manageBanner').DataTable().ajax.reload(null, false);
                            } else {
                                $.notify(response.message, "error");
                            }
                        }
                    });
                }
            });

            // Preview image before upload
            $('#banner_image').on('change', function(event) {
                let file = event.target.files[0];
                if (!file) return;

                if (file.size > 5 * 1024 * 1024) {
                    $.notify("Image must not exceed 5 MB", "error");
                    $('#banner_image').val('');
                    $('#previewImage').attr('src', "{{ asset('admin-assets/images/upload.png') }}");
                    return;
                }

                let img = new Image();
                img.src = URL.createObjectURL(file);

                img.onload = function() {
                    if (img.width !== 1920 || img.height !== 514) {
                        $.notify("Image must be exactly 1920 x 514 pixels", "error");
                        $('#banner_image').val(''); // Clear file input
                        $('#previewImage').attr('src', "{{ asset('admin-assets/images/upload.png') }}");
                    } else {
                        let reader = new FileReader();
                        reader.onload = function(e) {
                            $('#previewImage').attr('src', e.target.result);
                            $('.upload_photo').addClass('add_banner');
                        };
                        reader.readAsDataURL(file);
                    }
                };
            });

        });
    </script>
    <script>
        $(document).ready(function() {
            $('body').tooltip({
                selector: '[data-bs-toggle="tooltip"]',
                trigger: 'hover'
            });


            if ($.fn.DataTable.isDataTable('#manageBanner')) {
                $('#manageBanner').DataTable().destroy();
            }

            $('#manageBanner').DataTable({
                processing: true,
                serverSide: true,
                language: {
                    paginate: {
                        previous: '<i class="fa-solid fa-chevron-left"></i>',
                        next: '<i class="fa-solid fa-chevron-right"></i>'
                    }
                },
                ajax: {
                    url: "{{ route('bannerDetailPaginate') }}",
                    type: "GET"
                },
                columns: [{
                        data: 'DT_RowIndex',
                        name: 'DT_RowIndex',
                        orderable: false,
                        searchable: false
                    },
                    {
                        data: 'banner_name',
                        name: 'banners.banner_name'
                    },
                    {
                        data: 'banner_image',
                        name: 'banners.banner_image',
                        orderable: false,
                        searchable: false
                    },
                    {
                        data: 'status',
                        name: 'banners.status',
                        orderable: false,
                        searchable: false
                    },
                    {
                        data: 'action',
                        name: 'action',
                        orderable: false,
                        searchable: false
                    },
                    {
                        data: 'created_at',
                        name: 'banners.created_at',
                        orderable: false,
                        searchable: false
                    }
                ],
                initComplete: function() {
                    $('#manageBanner_filter input').attr('placeholder', 'Search');
                },
                scrollX: true,
                drawCallback: function() {
                    new VenoBox({
                        selector: '.my-image-links',
                        numeration: true,
                        infinigall: true,
                        share: true,
                        spinner: 'rotating-plane'
                    });
                }
            });
        });
    </script>

    <script>
        function bannerStatusChange(bannerId, newStatus) {
            $.ajax({
                url: "{{ route('banner.updateStatus') }}",
                method: 'POST',
                data: {
                    _token: $('meta[name="csrf-token"]').attr('content'),
                    bannerId: bannerId,
                    status: newStatus
                },
                success: function(response) {
                    if (response.success) {
                        $.notify('Banner status updated successfully', "success");
                        $('#manageBanner').DataTable().ajax.reload(null, false);
                    } else {
                        $.notify('Failed to update banner status', "error");
                    }
                },
                error: function() {
                    $.notify('An error occurred', "error");
                }
            });
        }
    </script>
    <script>
        function fetchBannerData(id) {
            $.ajax({
                url: "{{ route('getBannerDetails') }}",
                type: "GET",
                data: {
                    id: id
                },
                success: function(response) {
                    if (response.status === "success") {
                        $("#validateBannerForm")[0].reset();
                        $('#validateBannerForm').find('.error').each(function() {
                            if ($(this).is('label')) {
                                $(this).remove();
                            } else {
                                $(this).removeClass('error');
                            }
                        });
                        let banner = response.data;

                        $("#bannerModalLabel").text("Edit Banner");
                        $("#banner_id").val(banner.id);
                        $("#banner_name").val(banner.banner_name);
                        let imageVal = banner.banner_image;
                        let imagePath = imageVal ? `${imageVal}` :
                            '/assets/images/upload.png';
                        $('.upload_photo').addClass('add_banner');
                        $(`#previewImage`).attr('src', imagePath);

                        $('#add_banner').modal('show');
                    } else {
                        $.notify("Failed to fetch banner data.", "error");
                    }
                }
            });
        }
    </script>
    <script>
        function deleteBanner(id) {
            Swal.fire({
                title: "Are you sure?",
                text: "This banner will be permanently deleted.",
                icon: "warning",
                showCancelButton: true,
                confirmButtonColor: "#3085d6",
                cancelButtonColor: "#d33",
                confirmButtonText: "Yes, delete it!"
            }).then((result) => {
                if (result.isConfirmed) {
                    $.ajax({
                        url: "{{ route('banner.delete') }}",
                        type: "POST",
                        data: {
                            _token: $('meta[name="csrf-token"]').attr('content'),
                            id: id
                        },
                        success: function(response) {
                            if (response.success) {
                                $.notify("Banner has been deleted successfully.", "success");
                                $('#manageBanner').DataTable().ajax.reload(null, false);
                            } else {
                                $.notify("Failed to delete the banner.", "error");
                            }
                        }
                    });
                }
            });
        }
    </script>
@endsection