@extends('admin.master')

@section('title')
    Banner
@endsection

@section('content')
    <div class="mt-4">
        <div class="row g-4">
            <div class="col-md-12">
                <div class="row g-3 mb-4">
                    <div class="col-auto">
                        <h2 class="mb-0">Banner</h2>
                    </div>
                </div>
                <div class="d-flex justify-content-end mb-5">

                    <button class="btn btn-primary" type="button" id="addBannerBtn" data-bs-toggle="offcanvas"
                        data-bs-target="#add-update-banner-offcanvas" aria-controls="add-update-banner-offcanvas">Add Banner</button>
                </div>
                <div class="row g-3 mb-4">
                    <table class="table table-bordered table-sm mt-5" id="bannerTable">
                        <thead>
                            <tr>
                                <th>#</th>
                                <th>Title</th>
                                <th>Code</th>
                                <th>Order</th>
                                <th>Image</th>
                                <th>Created At</th>
                                <th>Action</th>
                            </tr>
                        </thead>
                    </table>
                </div>

            </div>
        </div>
    </div>
    <div class="offcanvas offcanvas-end" tabindex="-1" id="add-update-banner-offcanvas"
        aria-labelledby="offcanvasBannerLabel">
        <div class="offcanvas-header">
            <h5 class="offcanvas-title" id="offcanvasBannerLabel">Add/Update Banner</h5>
            <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
        </div>
        <div class="offcanvas-body">
            {!! Form::open(['id' => 'bannerForm', 'files' => true]) !!}

            {!! Form::hidden('id', null, ['id' => 'bannerId']) !!}

            <div class="mb-3">
                {!! Form::label('title', 'Title', ['class' => 'form-label']) !!}
                {!! Form::text('title', null, [
                    'class' => 'form-control form-control-sm',
                    'id' => 'bannerTitle',
                    'required' => true,
                    'placeholder' => 'Enter Title',
                ]) !!}
            </div>
            <div class="mb-3">
                {!! Form::label('code', 'Code', ['class' => 'form-label']) !!}
                {!! Form::text('code', null, [
                    'class' => 'form-control form-control-sm',
                    'id' => 'bannerCode',
                    'placeholder' => 'Enter Code',
                ]) !!}
            </div>
            <div class="mb-3">
                {!! Form::label('order', 'Order', ['class' => 'form-label']) !!}
                {!! Form::number('order', null, [
                    'class' => 'form-control form-control-sm',
                    'id' => 'bannerOrder',
                    'required' => true,
                    'placeholder' => 'Enter Order',
                    'min' => 0,
                ]) !!}
            </div>
            <div class="mb-3">
                {!! Form::label('image', 'Image', ['class' => 'form-label']) !!}
                <span class="text-danger">*</span>
                {!! Form::file('image[]', ['class' => 'form-control form-control-sm', 'id' => 'bannerImage', 'required' => true, 'accept' => 'image/jpeg,image/png,image/jpg,image/gif,image/webp']) !!}
                <small class="text-muted">Accepted formats: JPEG, PNG, JPG, GIF, WEBP (Max: 2MB)</small>
                <div id="imagePreview" class="mt-2"></div> {{-- Image preview container --}}
            </div>

            <div class="d-flex gap-2 justify-content-end mt-4">
                <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="offcanvas">Cancel</button>
                <button type="submit" id="saveBannerBtn" class="btn btn-primary">Save</button>
            </div>
            {!! Form::close() !!}
        </div>
    </div>
@endsection
@section('javascript')
    <!-- DataTables -->
    <link rel="stylesheet" href="https://cdn.datatables.net/1.13.6/css/dataTables.bootstrap5.min.css">
    <script src="https://cdn.datatables.net/1.13.6/js/jquery.dataTables.min.js"></script>
    <script src="https://cdn.datatables.net/1.13.6/js/dataTables.bootstrap5.min.js"></script>
    <!-- SweetAlert2 -->
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
    <script>
        $(document).ready(function() {

            $('#bannerTable').DataTable({
                processing: true,
                serverSide: true,
                ajax: "{{ route('admin.home-page.banners.index') }}",
                columns: [{
                        data: 'DT_RowIndex',
                        name: 'DT_RowIndex',
                        orderable: false,
                        searchable: false
                    },
                    {
                        data: 'title',
                        name: 'title'
                    },
                    {
                        data: 'code',
                        name: 'code'
                    },
                    {
                        data: 'order',
                        name: 'order'
                    },
                    {
                        data: 'image_url',
                        name: 'image_url',
                        orderable: false,
                        searchable: false,
                        render: function(data, type, row) {
                            if (data) {
                                return '<img src="' + data + '" class="img-thumbnail" style="max-height:50px;">';
                            }
                            return '-';
                        }
                    },
                    {
                        data: 'created_at',
                        name: 'created_at'
                    },
                    {
                        data: 'action',
                        name: 'action',
                        orderable: false,
                        searchable: false
                    }
                ]
            });
        });

        let bannerOffcanvas = new bootstrap.Offcanvas(document.getElementById('add-update-banner-offcanvas'));

        // Add Banner
        $('#addBannerBtn').on('click', function() {
            $('#bannerForm')[0].reset();
            $('#bannerId').val('');
            $('#imagePreview').html('');
            $('#bannerImage').prop('required', true);
            $('#offcanvasBannerLabel').text('Add Banner');
            bannerOffcanvas.show();
        });

        // Edit Banner
        $(document).on('click', '.edit-banner', function() {
            let id = $(this).data('id');
            let url = "{{ route('admin.home-page.banners.edit', ':id') }}".replace(':id', id);

            $.ajax({
                url: url,
                type: 'GET',
                contentType: false,
                processData: false,
                success: function(data) {
                    $('#bannerId').val(data.id);
                    $('#bannerTitle').val(data.title);
                    $('#bannerCode').val(data.code);
                    $('#bannerOrder').val(data.order);

                    if (data.image_url) {
                        $('#imagePreview').html('<img src="' + data.image_url +
                            '" class="img-thumbnail" style="max-height:80px;">');
                    } else {
                        $('#imagePreview').html('');
                    }

                    $('#bannerImage').prop('required', false);
                    $('#offcanvasBannerLabel').text('Edit Banner');
                    bannerOffcanvas.show();
                },
                error: function(xhr) {
                    let errors = xhr.responseJSON?.errors;
                    let msg = '';
                    if (errors) {
                        $.each(errors, function(key, value) {
                            msg += value[0] + '\n';
                        });
                        dangerToast(msg);
                    } else {
                        dangerToast('Something went wrong.');
                    }
                }
            });
        });

        // Delete Banner
        $(document).on('click', '.delete-banner', function() {
            let id = $(this).data('id');
            let url = "{{ route('admin.home-page.banners.destroy', ':id') }}".replace(':id', id);

            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: url,
                        type: 'DELETE',
                        data: {
                            _token: '{{ csrf_token() }}'
                        },
                        success: function(res) {
                            if (res.code === '1' || res.code === 1) {
                                successToast(res.message || 'Banner deleted successfully');
                                $('#bannerTable').DataTable().ajax.reload();
                            } else {
                                dangerToast(res.message || 'Something went wrong.');
                            }
                        },
                        error: function(xhr) {
                            let errors = xhr.responseJSON?.errors;
                            let msg = '';
                            if (errors) {
                                $.each(errors, function(key, value) {
                                    msg += value[0] + '\n';
                                });
                                dangerToast(msg);
                            } else {
                                dangerToast('Something went wrong.');
                            }
                        }
                    });
                }
            });
        });

        $('#bannerForm').on('submit', function(e) {
            e.preventDefault();

            let formData = new FormData(this);
            let id = $('#bannerId').val();

            let url = id ?
                "{{ route('admin.home-page.banners.update', ':id') }}".replace(':id', id) :
                "{{ route('admin.home-page.banners.store') }}";

            let method = id ? "POST" : "POST";

            if (id) {
                formData.append('_method', 'PUT');
            }

            $.ajax({
                url: url,
                type: method,
                data: formData,
                contentType: false,
                processData: false,
                success: function(res) {
                    if (res.code === '1' || res.code === 1) {
                        successToast(res.message || 'Banner saved successfully');
                        bannerOffcanvas.hide();
                        $('#bannerTable').DataTable().ajax.reload();
                        $('#bannerForm')[0].reset();
                        $('#bannerId').val('');
                        $('#imagePreview').html('');
                    } else {
                        dangerToast(res.message || 'Something went wrong.');
                    }
                },
                error: function(xhr) {
                    let errors = xhr.responseJSON?.errors;
                    let msg = '';
                    if (errors) {
                        $.each(errors, function(key, value) {
                            msg += value[0] + '\n';
                        });
                        dangerToast(msg);
                    } else {
                        dangerToast('Something went wrong.');
                    }
                }
            });
        });


        $('#bannerImage').on('change', function(e) {
            const file = e.target.files[0];

            if (file && file.type.startsWith('image/')) {
                const reader = new FileReader();

                reader.onload = function(event) {
                    $('#imagePreview').html(
                        '<img src="' + event.target.result +
                        '" class="img-thumbnail" style="max-height:80px;">'
                    );
                };

                reader.readAsDataURL(file);
            } else {
                $('#imagePreview').html('');
            }
        });
    </script>
@endsection