@extends('admin.layouts.admin-master')
@section('page-title')
    {{__("City Manage")}}
@endsection
@section('content')
    <div class="dashboard__inner__item dashboard__card bg__white padding-20 radius-10 margin-30">
        <div class="dashboard__card__header d-flex justify-content-between">
            <h4 class="dashboard__card__header__title"> {{__("City Manage")}}</h4>
            <div>
                <a href="#0" data-target="addStaffModal" data-toggle="modal" class="cmnBtn btn_outline_blue radius-5" ><span>Add New</span></a>
            </div>
        </div>
        <div class="mt-4 mb-4">
            <x-admin.flash-msg.error />
            <x-admin.flash-msg.msg />
        </div>
        <div class="tableStyle_one mt-4">
            <div class="table_wrapper">
                <table>
                    <thead>
                    <tr>
                        <th>ID</th>
                        <th>Name</th>
                        <th>State</th>
                        <th>Country</th>
                        <th>Status</th>
                        <th>Action</th>
                    </tr>
                    </thead>
                    <tbody>
                    @forelse($all_data as $data)
                        <tr>
                            <td>{{$data->id}}</td>
                            <td> {{$data->name}}</td>
                            <td> {{$data->state?->name}}</td>
                            <td>{{$data->state?->country?->emoji}} {{$data->state?->country?->name}}</td>
                            <td>{{\App\Enums\StatusEnums::label($data->status)}}</td>
                            <td>

                                <div class="dropdown custom__dropdown">
                                    <button class="dropdown-toggle" type="button" id="dropdownMenuButton1" data-bs-toggle="dropdown" aria-expanded="false">
                                        <i class="las la-ellipsis-h"></i>
                                    </button>
                                    <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="dropdownMenuButton1">
                                        <li>
                                            <a
                                                class="dropdown-item staff_edit_btn"
                                                role="button"
                                                data-target="editStaffModal"
                                                data-toggle="modal"
                                                data-action="{{route('city.update',$data->id)}}"
                                                data-name="{{$data->name}}"
                                                data-status="{{$data->status}}"
                                            >
                                                Edit
                                            </a>
                                        </li>
                                        <li><x-admin.delete-popover url="{{route('city.destroy',$data->id)}}" /></li>
                                    </ul>
                                </div>
                            </td>
                        </tr>
                    @empty
                        <tr><td colspan="5">not data found</td></tr>
                    @endforelse
                    </tbody>
                </table>
            </div>
        </div>
        <div class="pagination">
            {!! $all_data->links() !!}
        </div>
    </div>


    <div class="popup_fixed modal_normal__fixed" id="addStaffModal">
        <div class="popup_contents">
            <div class="popup_contents__header">
                <div class="popup_contents__header__flex">
                    <div class="popup_contents__header__contents">
                        <h2 class="popup_contents__header__title">Add New City</h2>
                    </div>
                    <div class="popup_contents__header__close">
                        <span class="popup_contents__close popup_close"> <i class="las la-times"></i> </span>
                    </div>
                </div>
            </div>
            <div class="popup_contents__body">
                <form action="{{route('city.store')}}" method="post">
                    @csrf

                    <div class="form__input__single">
                        <label  class="form__input__single__label">Name</label>
                        <input type="text" name="name" class="form__control radius-5" placeholder="Name...">
                    </div>


                    <div class="single_input mt-5">
                        <label class="label_title">Status</label>
                        <select class="form__control radius-5" name="status">
                            <option value="{{\App\Enums\StatusEnums::PUBLISH->value}}">{{\App\Enums\StatusEnums::PUBLISH->singleLabel()}}</option>
                            <option value="{{\App\Enums\StatusEnums::DRAFT->value}}">{{\App\Enums\StatusEnums::DRAFT->singleLabel()}}</option>
                        </select>
                    </div>
                    <div class="btn__wrapper form__input__single">
                        <button type="submit" class="cmn_btn btn_bg_1 btn_small radius-5">Submit</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
    <div class="popup_fixed modal_normal__fixed" id="editStaffModal">
        <div class="popup_contents">
            <div class="popup_contents__header">
                <div class="popup_contents__header__flex">
                    <div class="popup_contents__header__contents">
                        <h2 class="popup_contents__header__title">Edit</h2>
                    </div>
                    <div class="popup_contents__header__close">
                        <span class="popup_contents__close popup_close"> <i class="las la-times"></i> </span>
                    </div>
                </div>
            </div>
            <div class="popup_contents__body">
                <form action="#" method="post">
                    @csrf
                    @method('PUT')
                    <div class="form__input__single">
                        <label for="name1" class="form__input__single__label">Name</label>
                        <input type="text" id="name1" name="name" class="form__control radius-5" placeholder="Name...">
                    </div>
                    <div class="single_input mt-5">
                        <label class="label_title">Status</label>
                        <select class="form__control radius-5" name="status">
                            <option value="{{\App\Enums\StatusEnums::PUBLISH->value}}">{{\App\Enums\StatusEnums::PUBLISH->singleLabel()}}</option>
                            <option value="{{\App\Enums\StatusEnums::DRAFT->value}}">{{\App\Enums\StatusEnums::DRAFT->singleLabel()}}</option>
                        </select>
                        </select>
                    </div>
                    <div class="btn__wrapper form__input__single">
                        <button type="submit" class="cmn_btn btn_bg_1 btn_small radius-5">Submit</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
@endsection
@section('scripts')
    <script>
        (function ($){
            "use strict";

            $(document).on('click','.staff_edit_btn',function (event){
                event.preventDefault();

                const modalId = $('#editStaffModal');
                const formContainer = modalId.find('form');
                let name = $(this).data('name');
                let action = $(this).data('action');
                let status = $(this).data('status');
                formContainer.find('input[name="name"]').val(name);
                formContainer.find('select[name="status"] option[value="'+status+'"]').attr('selected',true);
                formContainer.attr('action',action);
            });

        })(jQuery);
    </script>
@endsection