@include('header')
<style>
    .custom-upload-btn {
        display: inline-block;
        padding: 10px 15px;
        font-size: 16px;
        cursor: pointer;
        border: 2px solid #3498db;
        color: #3498db;
        border-radius: 5px;
        transition: background 0.3s, color 0.3s;
    }

    .custom-upload-btn:hover {
        background: #3498db;
        color: #fff;
    }

    /* استایل تصویر پیش‌نمایش */
    #previewImage {
        width: 500px;
        display: none;
        margin-top: 10px;
        border: 2px solid #3498db;
        border-radius: 5px;
    }

    .upload_my_pic {
        display: inline-block;
        padding: 10px 30px;
        font-size: 14px;
        cursor: pointer;
        color: white;
        background-color: #00dc2f;
        border-radius: 25px;
    }

    .users_dtl {
        cursor: pointer !important;
        color: white;
        background-color: darkred;
        padding: 5px 20px 5px 20px;
        border-radius: 5px;
        white-space: nowrap !important;
        text-align: center;
        width: fit-content;

    }
    .td_img{
        display: flex!important ;
        justify-content: center
    }
    .table>tbody>tr>td, .table>tbody>tr>th, .table>tfoot>tr>td, .table>tfoot>tr>th, .table>thead>tr>td, .table>thead>tr>th{
        vertical-align: middle;
    }
    .show_img{
        width: 300px;
        height: 150px;
        border-radius: 20px;
    }


</style>

<div class="x_panel">
    <div class="x_title">
        <h2>آپلود اسلایدر</h2>
        <ul class="nav navbar-right panel_toolbox">
            <li><a class="collapse-link"><i class="fa fa-chevron-up"></i></a>
            </li>
        </ul>
        <div class="clearfix"></div>
    </div>

    {{--*************** upload pic--}}
    <div class="x_content">

        <form id="upload_slider">
            <!-- المان ورودی -->
            <input type="file" id="fileInput" onchange="ChangePic(this)" style="display: none;">
            <!-- دکمه زیبا برای آپلود -->
            <label for="fileInput" class="custom-upload-btn">انتخاب تصویر</label>

            <img id="previewImage" src="" style=" width: 500px ; height:250px; display: none;">
            <br>
            <br>
            <input type="button" value="آپلود تصویر" class="upload_my_pic" onclick="upload_my_slider()">
        </form>

    </div>
    {{--*************** end upload pic--}}
</div>


<div class="x_panel">
    <div class="x_title">
        <h2>اسلایدر ها</h2>
        <ul class="nav navbar-right panel_toolbox">
            <li><a class="collapse-link"><i class="fa fa-chevron-up"></i></a>
            </li>
        </ul>
        <div class="clearfix"></div>
    </div>
    <div class="x_content">

        <div id="datatable-buttons_wrapper" class="dataTables_wrapper form-inline dt-bootstrap no-footer">

            <table id="datatable-buttons"
                   class="table table-striped table-bordered dataTable no-footer dtr-inline collapsed" role="grid"
                   aria-describedby="datatable-buttons_info" style="width: 100%;">
                <thead>
                <tr role="row">
                    <th class="sorting" tabindex="0" aria-controls="datatable-buttons" rowspan="1" colspan="1"
                        style="width: 70%;!important display: none;"
                        aria-label="سن: activate to sort column ascending">تصویر
                    </th>
                    <th class="sorting" tabindex="0" aria-controls="datatable-buttons" rowspan="1" colspan="1"
                        style="width: 30%;!important display: none;"
                        aria-label="سن: activate to sort column ascending">عملیات
                    </th>
                </tr>
                </thead>


                <tbody>
                @foreach($items as $item)
                    <tr role="row" class="odd">
                        <td class="td_img"><img src="{{$item->pic}}"  class="show_img"></td>
                        <td class="td_btn"><a class="users_dtl" onclick="delete_slider({{$item->id}})">حذف اسلایدر</a></td>
                    </tr>
                @endforeach
                </tbody>
            </table>
        </div>
    </div>
</div>


{{--    /****************--}}
<script src="../resources/js/jquery.js"></script>
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script src="sweetalert2.all.min.js"></script>

<script>
    function ChangePic(input) {
        if (input.files && input.files[0]) {
            var reader = new FileReader();
            reader.onload = function (e) {
                var previewImage = document.getElementById('previewImage');
                previewImage.src = e.target.result;
                previewImage.style.display = 'block'; // تغییر این خط

            }
            reader.readAsDataURL(input.files[0]);
        }
    }
</script>
<script>
    function upload_my_slider() {

        var formData = new FormData();
        formData.append('pic', $('#fileInput')[0].files[0]);
        formData.append('action', "add");

        $.ajax({
            url: "/panel/slider_page_action",
            type: "POST",
            data: formData,
            processData: false, // تا برای ارسال فرم‌داده‌ها به عنوان FormData تصادفی تغییر نکند
            contentType: false, // تا تایپ محتوا به عنوان multipart/form-data تنظیم شود
            success: function (res) {
                if (res.status == 'ok') {
                    Swal.fire({
                        title: 'اضافه شد',
                        text: 'اسلایدر با موفقیت اضافه شد',
                        icon: 'success',
                        timer: 1500
                    }).then(() => {
                        location.reload()
                    });
                    console.log(res);
                } else {
                    Swal.fire({
                        title: 'خطا!',
                        text: 'مشکلی پیش آمد. لطفاً دوباره تلاش کنید.',
                        icon: 'error'
                    });
                    console.log(res);
                }
            },
            error: function (res) {
                console.log(res);
            }
        });
    }


    function delete_slider(id) {
        Swal.fire({
            title: 'آیا مطمئن هستید',
            icon: 'question',
            showCancelButton: true,
            confirmButtonColor: '#3085d6',
            cancelButtonColor: '#d33',
            confirmButtonText: 'بله',
            cancelButtonText: 'خیر'
        }).then((result) => {
            if (result.isConfirmed) {
                $.ajax({
                    type: "POST",
                    url: '/panel/slider_page_action',
                    data: {
                        id: id,
                        action: "deletepic",
                    },

                    success: function (res) {
                        if (res.status == 'ok') {
                            Swal.fire({
                                position: 'center',
                                icon: 'success',
                                title: 'تغییرات اعمال شد',
                                showConfirmButton: false,
                                timer: 1500
                            }).then(() => {
                                location.reload()
                            })
                        } else {
                            alert('مشکلی پیش آمد. لطفا مجدد تلاش کنید')
                        }
                    },
                    error: function (res) {
                        console.log(res);
                    },
                });
            }
        })
    }

</script>

@include('footer')