@include('header')


<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>
            <li class="dropdown">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false"><i
                        class="fa fa-wrench"></i></a>
                <ul class="dropdown-menu" role="menu">
                    <li><a href="#">تنظیمات 1</a>
                    </li>
                    <li><a href="#">تنظیمات 2</a>
                    </li>
                </ul>
            </li>
            <li><a class="close-link"><i class="fa fa-close"></i></a>
            </li>
        </ul>
        <div class="clearfix"></div>
    </div>

    <div class="x_content">

        <!-- start accordion -->
        <div class="accordion" id="accordion" role="tablist" aria-multiselectable="true">
            @foreach($items as $item)
                <div class="panel">
                    <a class="panel-heading collapsed" role="tab" id="headingThree" data-toggle="collapse"
                       data-parent="#accordion" href="#collapse{{$item->id}}" aria-expanded="false"
                       aria-controls="collapseThree">
                        <div style="display: flex;justify-content: space-between">
                            <h4 class="panel-title">{{$item->name}}</h4>
                            <a class="my_btn" onclick="add_city({{$item->id}})">افزودن شهرستان</a>
                        </div>
                    </a>
                    <div id="collapse{{$item->id}}" class="panel-collapse collapse" role="tabpanel"
                         aria-labelledby="headingThree" aria-expanded="false">
                        <div class="panel-body">
                            <table class="table">
                                @foreach($item->city as $city)
                                    <tr>
                                        <td style="width: 80%; padding: 10px">{{$city->name}}</td>
                                        <td style="width: 20% ; padding: 10px">
                                            <a onclick="delete_city({{$city->id}})"><i class="fa fa-trash" style="font-size: 20px;color: red"></i></a>
                                        </td>
                                    </tr>
                                @endforeach


                            </table>
                        </div>
                    </div>
                </div>
            @endforeach
        </div>
        <!-- end of accordion -->


    </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 delete_city(id) {
        Swal.fire({
            title: 'حذف این شهرستان',
            icon: 'question',
            confirmButtonText: 'ثبت',
            confirmButtonColor: '#00A000',

            preConfirm: () => {
                console.log({
                    action: 'delete',
                    city_id: id,
                })

                $.ajax({
                    type: "POST",
                    url: '/panel/city_page_action',
                    data: {
                        action: 'delete',
                        city_id: id,
                    },
                    success: function (res) {
                        if (res.status == 'ok') {
                            alert('شهر حذف شد')
                            location.reload();
                        } else {
                            alert('مشکلی پیش آمد. لطفا مجدد تلاش کنید')
                        }
                    },
                    error: function (res) {
                        console.log(res);
                    },
                });
            }
        });
    }
</script>

<script>
    function add_city(id) {
        Swal.fire({
            title: 'اضافه کردن شهرستان',
            icon: 'question',
            html: `
        <input type="text" id="name" class="swal2-input" placeholder="نام">`,
            confirmButtonText: 'ثبت',
            confirmButtonColor: '#00A000',

            preConfirm: () => {
                const name = document.getElementById('name').value;
                // انجام عملیات مورد نیاز با اطلاعات گرفته شده
                console.log({
                    action: 'add',
                    state_id: id,
                    name: name,
                })

                $.ajax({
                    type: "POST",
                    url: '/panel/city_page_action',
                    data: {
                        action: 'add',
                        state_id: id,
                        name: name,
                    },
                    success: function (res) {
                        console.log(res)
                        if (res.status == 'ok') {
                            alert('شهرستان اضافه شد')
                            location.reload();
                        } else {
                            alert('مشکلی پیش آمد. لطفا مجدد تلاش کنید')
                        }
                    },
                    error: function (res) {
                        console.log(res);
                    },
                });
            }
        });
    }
</script>

@include('footer')