@extends('layouts.master')
@section('styles')
    <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet">
    <!-- Toastify CSS -->
    <link rel="stylesheet" href="{{ asset('build/assets/libs/toastify-js/src/toastify.css') }}">
@endsection
@section('content')
    <meta name="csrf-token" content="{{ csrf_token() }}" />
    <!-- Page Header -->
    @php
        $breadcrumbs = [
            ['label' => 'Dashboard', 'url' => route('admin.dashboard')],
            ['label' => 'Home Slider', 'url' => '#', 'active' => true],
        ];
    @endphp
    <x-ui.breadcrumb :items="$breadcrumbs" title="Home Sliders" />
    <!-- Page Header Close -->

    <!-- Start::row-1 -->
    <div class="row">
        <div class="col-xl-12">
            <x-ui.card :cardClass="'overflow-hidden'" :hr_line="false" title="">
                <x-slot name="header">
                    <div class="card-title d-flex gap-2">
                        <x-form.dropdown label="Bulk Actions" class="bulk-actions">
                            <li><a class="dropdown-item" href="#" id="enable" data-id="slider">Active</a></li>
                            <li><a class="dropdown-item" href="#" id="disable" data-id="slider">Disable</a></li>
                        </x-form.dropdown>
                        <div>
                            <input class="form-control" type="text" id="search" placeholder="Search Here"
                                aria-label=".form-control-sm example">
                        </div>
                    </div>
                    <a href="#" class="btn btn-primary btn-wave add-banner">
                        <i class="ri-add-line me-1 align-middle"></i>
                        Add Slider
                    </a>

                </x-slot>

                @php
                    $columns = [
                        ['checkbox' => true, 'class' => 'ps-4'],
                        ['label' => 'Image'],
                        ['label' => 'Title'],
                        ['label' => 'Type'],
                        ['label' => 'Action'],
                        ['label' => 'Url'],
                        ['label' => 'Status'],
                        ['label' => 'Action'],
                    ];
                @endphp

                <x-ui.table id="data_table" :columns="$columns"></x-ui.table>
            </x-ui.card>
        </div>
    </div>

    {{-- Model --}}
    <x-ui.modal id="slderModal" title="Add Slider">
        <div class="modal-body p-2">
            <form action="{{ route('admin.home.home-slider.store') }}" method="POST" enctype="multipart/form-data">
                @csrf
                <div class="row gy-3">
                    <x-form.input label="Title:" class="" name="title" placeholder="Enter title" autofocus />

                    <x-form.select name="action" label="Select Screen you want to open" :options="$btn->pluck('title','type')"
                        placeholder="Select On Click Action" :required="true" />

                    <x-form.input label="Url:" col="d-none" type="url" name="url" placeholder="https://"
                        autofocus :required="false" />

                    <div class="row">
                        <x-form.outline-toggle class="col-xl-6 mt-3" name="slider_type" label="Slider Type"
                            :selected="old('slider_type')" :required="true" :options="[
                                'slide' => ['label' => 'Slider'],
                                'popup' => ['label' => 'Popup'],
                            ]" />

                        <x-form.input label="Slider Order:" col="col-xl-6 mt-3" type="number" name="item_order"
                            placeholder="1" autofocus value="1" :required="false" />

                    </div>

                    <x-form.dropzone-image name="media" id="uploadmedia" placeholder="assets/images/media-placeholder.svg"
                        sizeLabel="200×200 px" label="Slider Image Attachment" :required="true" />

                </div>
                <button type="submit" id="submit" class="btn btn-primary mt-3 mb-3 px-4 float-end">Add</button>
            </form>
        </div>
    </x-ui.modal>
    {{-- End model --}}

      {{-- Model --}}
    <x-ui.modal id="updateslderModal" title="Update Slider">
        <div class="modal-body p-2">
            <form action="{{ route('admin.home.home-slider.update') }}" method="POST" enctype="multipart/form-data">
                @csrf
                <input type="hidden" name="id" id="slider_id">
                <div class="row gy-3">
                    <x-form.input label="Title:" class="" name="title" placeholder="Enter title" autofocus />

                    <x-form.select name="action1" label="Select Screen you want to open" :options="$btn->pluck('title','type')"
                        placeholder="Select On Click Action" :required="true" />

                    <x-form.input label="Url:" col="d-none" type="url" name="url" placeholder="https://"
                        autofocus :required="false" />

                    <div class="row">
                        <x-form.outline-toggle class="col-xl-6 mt-3" name="slider_type1" label="Slider Type"
                            :selected="old('slider_type1')" :required="true" :options="[
                                'slide' => ['label' => 'Slider'],
                                'popup' => ['label' => 'Popup'],
                            ]" />

                        <x-form.input label="Slider Order:" col="col-xl-6 mt-3" type="number" name="item_order"
                            placeholder="1" autofocus value="1" :required="false" />

                    </div>

                    <x-form.dropzone-image name="media" id="uploadmedia1" placeholder="assets/images/media-placeholder.svg"
                        sizeLabel="200×200 px" label="Slider Image Attachment" :required="false" />

                </div>
                <button type="submit" id="submit" class="btn btn-primary mt-3 mb-3 px-4 float-end">Save</button>
            </form>
        </div>
    </x-ui.modal>
    {{-- End model --}}
@endsection

@section('scripts')
    @include('layouts.components.common-script')

    <script>
        $(document).ready(function() {
            const table = new DataTableUtility('data_table', "{{ route('admin.home.home-slider.data') }}", {

            }, [{
                    data: 'id',
                    orderable: false,
                    render: function(data, type, row) {
                        return `<input class="form-check-input sub_chk" type="checkbox" id="checkboxNoLabeljob22" data-id="${data}" value="${data}">`;
                    }
                },
                {
                    data: 'image',
                    render: function(data, type, row) {
                        return `<img src="{{ asset('uploads/slider') }}/` + row.image +
                            `" alt="" style="height:100px; width:150px; border-radius:10px;">`;
                    }
                }, {
                    data: 'title'
                }, {
                    data: 'action'
                }, {
                    data: 'slider_type'
                }, {
                    data: 'url',
                    render: function(data, type, row) {
                        if (data != null) {
                            return `<a href="` + data +
                                `" target="blank" class="text-primary">View Url</a>`;
                        } else {
                            return '-';
                        }
                    }
                },
                {
                    data: 'status',
                    render: function(data, type, row) {
                        return (data == 1) ?
                            `<span class="badge fw-semibold badge-pill bg-success-transparent text-success fs-11">Active</span>` :
                            `<span class="badge fw-semibold badge-pill bg-danger-transparent text-danger fs-11">Inactive</span>`;
                    }
                },
                {
                    data: null,
                    orderable: false,
                    render: function(data, type, row) {
                        return `
                            <a href="#" class="btn btn-icon btn-sm btn-info-light btn-wave waves-effect waves-light edit-banner" id="${row.id}">
                                <i class="ri-edit-line"></i>
                            </a>
                            <a href="javascript:void(0);" id="` + row.id + `" data-id="slider" class="joblist-btn btn btn-icon btn-sm btn-primary2-light btn-wave waves-effect waves-light deleteItem">
                                <i class="ri-delete-bin-line"></i>
                            </a>`;
                    }
                }
            ]);
            table.initialize();

        });

        $('input[name="slider_type"').on('click', function() {
            if (this.value == 'slide') {
                $('.dz-size').html('400*200 px <span class="text-muted">(Recommended)</span>');
            } else {
                $('.dz-size').html('400*400 px <span class="text-muted">(Recommended)</span>');
            }
        });
        $('input[name="slider_type1"').on('click', function() {
            if (this.value == 'slide') {
                $('.dz-size').html('400*200 px <span class="text-muted">(Recommended)</span>');
            } else {
                $('.dz-size').html('400*400 px <span class="text-muted">(Recommended)</span>');
            }
        });

        $('#action').on('change', function() {
             var type=this.value;
            if (type.includes('url')) {
                $('#div_url').removeClass('d-none');
                $('#url').attr('required', true);
            } else {
                $('#div_url').addClass('d-none');
                $('#url').attr('required', false);
            }
        });
        $('#action1').on('change', function() {
            var type=this.value;
            if (type.includes('url')) {
                $('#updateslderModal #div_url').removeClass('d-none');
                $('#updateslderModal #url').attr('required', true);
            } else {
                $('#updateslderModal #div_url').addClass('d-none');
                $('#updateslderModal #url').attr('required', false);
            }
        });

        $('.add-banner').click(function() {
            $('#slderModal').modal('show');
        })

        $('body').on('click', '.edit-banner', function() {
            
            const id = $(this).attr('id'); // Use the data-id attribute directly
            if (id) {
                const url = `{{ route('admin.home.home-slider.edit', ['id' => '__ID__']) }}`.replace('__ID__', id);

                AjaxUtil.get(url, function(response) {
                    $('#updateslderModal #slider_id').val(id);
                    $('#updateslderModal #title').val(response.title);
                    $('#updateslderModal #url').val(response.url);
                    if(response.slider_type=="slide"){
                       $('input[name="slider_type1"][value="slide"]').prop('checked', true).trigger('change');
                    }else{
                        $('input[name="slider_type1"][value="popup"]').prop('checked', true).trigger('change');
                    }
                    $('#action1 option[value='+response.action+']').attr('selected','selected');

                    var type=response.action;
                    if (type.includes('url')) {
                        $('#updateslderModal #div_url').removeClass('d-none');
                        $('#updateslderModal #url').attr('required', true);
                    } else {
                        $('#updateslderModal #div_url').addClass('d-none');
                        $('#updateslderModal #url').attr('required', false);
                    }
                    
                   
     
                    setDropzonePreview('uploadmedia1',`{{asset('uploads/slider/${response.image}')}}`);
                    $('#updateslderModal').modal('show');
                }, function(xhr, status, error) {
                    console.error('Error:', error);
                    AjaxUtil.showToast('Error loading data.', 'error');
                });
            } else {
                AjaxUtil.showToast('Invalid ID.', 'error');
            }
        })


        function setDropzonePreview(id, url) {
            var $wrapper = $('#'+id);
            var $info    = $('#info_'+id);
            var $preview = $('#preview_'+id);
            var $remove  = $('#remove_'+id);
            var $input   = $('#input_'+id);
            var $old     = $('#old_'+id);

            $preview
                .attr('src', url)
                .css('opacity', 1);

            $info.hide();
            $remove.show();

            $input.val('');

            if ($old.length) {
                $old.val(url).prop('disabled', false);
            }
        }
    </script>
@endsection