@extends('layouts.admin.master')
@section('title', 'Location')

@section('content')
    <section class="home-section">
        <div class="home-title">
            <i class='bx bx-menu'></i>
            <span class="text">Location</span>
        </div>
        <div class="home-content">
            <div class="row pb-3 align-items-center" style="color:#512DA8; font-weight:bold">
                <div class="col">
                    <label>Add New Location</label>
                </div>
                <div class="col" style="text-align: right">
                    {{-- <button class="btn btn-danger"><i class="fa-solid fa-eraser"
                            style="padding-right: 5px"></i>Clear</button>
                    <button class="btn btn-primary"><i class="fa-regular fa-floppy-disk"
                            style="padding-right: 5px"></i>Save</button> --}}
                </div>
            </div>
            <div id="city_list_label" class="row align-items-center bg-white">
                <div class="col-6">
                    <label><i class="fa-solid fa-city" style="padding-left:5px; padding-right: 18px"></i>City
                        Lists</label>
                </div>
                <div class="col-6" style="text-align: right">
                    <i class="bx bxs-chevron-down arrow"></i>
                </div>
            </div>
            <div class="city_list_container shadow-sm">
                <table id="city" class="table table-striped" style="width:100%">
                    <thead>
                        <tr>
                            <th>No</th>
                            <th>City Name</th>
                            <th>Discontinued</th>
                            <th>Edit</th>
                            <th>Delete</th>
                        </tr>
                    </thead>
                    <tbody>
                        @if (count($cities) != 0)
                            @php
                                $count = 1;
                            @endphp
                            @foreach ($cities as $city)
                                <tr>
                                    <td style="text-align: center">{{ $count }}</td>
                                    <td>{{ $city['city_name'] }}</td>
                                    @if ($city['is_discontinued'] == 0)
                                        <td><input class="form-check-input" type="checkbox" onclick="return false;"></td>
                                    @elseif ($city['is_discontinued'] == 1)
                                        <td><input class="form-check-input" type="checkbox" checked onclick="return false;">
                                        </td>
                                    @endif
                                    <td><a data-city_id="{{ $city['city_id'] }}" data-city_name="{{ $city['city_name'] }}"
                                            data-is_discontinued="{{ $city['is_discontinued'] }}" data-bs-toggle="modal"
                                            data-bs-target="#edit_city_modal" class="edit_city_modal_dialog"><i
                                                class="fa-solid fa-pen" style="color: blue; cursor: pointer;"></i></a></td>
                                    <td><a data-city_id="{{ $city['city_id'] }}" data-city_name="{{ $city['city_name'] }}"
                                            data-bs-toggle="modal" data-bs-target="#delete_city_modal"
                                            class="delete_city_modal_dialog"><i class="fa-regular fa-trash-can"
                                                style="color: red;cursor: pointer;"></i></a>
                                    </td>
                                </tr>
                                @php
                                    $count++;
                                @endphp
                            @endforeach
                        @endif
                    </tbody>

                </table>
                <div class="d-flex justify-content-end mt-3">
                    <button type="button" class="btn custom_btn" data-bs-toggle="modal"
                        data-bs-target="#create_city_modal">
                        New City
                    </button>
                </div>
                <!--Create City Modal -->
                <div class="modal fade" id="create_city_modal" data-bs-backdrop="static" data-bs-keyboard="false"
                    tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
                    <div class="modal-dialog modal-dialog-centered">
                        <div class="modal-content">
                            <div class="modal-header text-center" style="background-color: #512DA8">
                                <h1 class="modal-title fs-5 w-100" id="staticBackdropLabel" style="color: white">
                                    City
                                </h1>
                                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"
                                    aria-label="Close"></button>
                            </div>
                            <div class="modal-body" style="margin-left: 20px; margin-right:20px">
                                <form action="{{ route('city#create') }}" method="POST" id="cityFormCreate">
                                    @csrf
                                    <div class="row mb-3 mt-3">
                                        <div class="col-5">
                                            <label class="form-label">City Name <span style="color: red">*</span></label>
                                        </div>
                                        <div class="col">
                                            <input class="form-control" type="text" name="city_name" id="city_name">
                                        </div>
                                    </div>
                                    <div class="row align-items-center mb-3">
                                        <div class="col-5">
                                            <label class="form-label text-danger">Discontinued</label>
                                        </div>
                                        <div class="col">
                                            <input class="form-check-input" type="checkbox" name="is_discontinued"
                                                id="is_discontinued">
                                        </div>
                                    </div>
                                </form>
                            </div>
                            <div class="modal-footer" style="margin-right: 20px">
                                <button type="submit" form="cityFormCreate" class="btn custom_btn">Create</button>
                            </div>
                        </div>
                    </div>
                </div>
                <!--Edit City Modal -->
                <div class="modal fade" id="edit_city_modal" data-bs-backdrop="static" data-bs-keyboard="false"
                    tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
                    <div class="modal-dialog modal-dialog-centered">
                        <div class="modal-content">
                            <div class="modal-header text-center" style="background-color: #512DA8">
                                <h1 class="modal-title fs-5 w-100" id="staticBackdropLabel" style="color: white">Update
                                    City
                                </h1>
                                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"
                                    aria-label="Close"></button>
                            </div>
                            <div class="modal-body" style="margin-left: 20px; margin-right:20px">
                                <form action="{{ route('city#update') }}" method="POST" id="cityFormEdit">
                                    @csrf
                                    <input type="text" name="edit_city_id" id="edit_city_id" hidden>
                                    <div class="row mb-3 mt-3">
                                        <div class="col-5">
                                            <label class="form-label">City Name <span style="color: red">*</span></label>
                                        </div>
                                        <div class="col">
                                            <input class="form-control" type="text" name="edit_city_name"
                                                id="edit_city_name">
                                        </div>
                                    </div>
                                    <div class="row align-items-center mb-3">
                                        <div class="col-5">
                                            <label class="form-label text-danger">Discontinued</label>
                                        </div>
                                        <div class="col">
                                            <input class="form-check-input" type="checkbox" name="edit_is_discontinued"
                                                id="edit_is_discontinued">
                                        </div>
                                    </div>
                                </form>
                            </div>
                            <div class="modal-footer" style="margin-right: 20px">
                                <input type="submit" class="btn custom_btn" value="Update" form="cityFormEdit">
                            </div>
                        </div>
                    </div>
                </div>
                <!--Delete City Modal -->
                <div class="modal fade" id="delete_city_modal" data-bs-backdrop="static" data-bs-keyboard="false"
                    tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
                    <div class="modal-dialog modal-dialog-centered">
                        <div class="modal-content">
                            <div class="modal-header text-center" style="background-color: #512DA8">
                                <h1 class="modal-title fs-5 w-100" id="delete_modal_header" style="color: white">
                                </h1>
                                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"
                                    aria-label="Close"></button>

                            </div>
                            <div class="modal-body" style="margin-left: 20px; margin-right:20px">
                                <form action="{{ route('city#delete') }}" method="POST" id="cityFormDelete">
                                    @csrf
                                    <input type="text" name="delete_city_id" id="delete_city_id" hidden>
                                    <div class="row align-items-center mb-3 mt-3">
                                        <div>
                                            <label class="form-label">Are you sure want to delete?</label>
                                        </div>
                                    </div>
                                </form>
                            </div>
                            <div class="modal-footer" style="margin-right: 20px">
                                <input type="submit" form="cityFormDelete" class="btn btn-danger" value="Delete">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div id="township_list_label" class="row align-items-center bg-white">
                <div class="col-6">
                    <label><i class="fa-solid fa-tree-city" style="padding-left:5px; padding-right: 19px"></i>Township
                        Lists</label>
                </div>
                <div class="col-6" style="text-align: right">
                    <i class="bx bxs-chevron-down arrow"></i>
                </div>
            </div>
            <div class="township_list_container shadow-sm ">
                <table id="township" class="table table-striped" style="width:100%">
                    <thead>
                        <tr>
                            <th>No</th>
                            <th>Township Name</th>
                            <th>City Name</th>
                            <th>Discontinued</th>
                            <th>Edit</th>
                            <th>Delete</th>
                        </tr>
                    </thead>
                    <tbody>
                        @if (count($townships) != 0)
                            @php
                                $count = 1;
                            @endphp
                            @foreach ($townships as $township)
                                <tr>
                                    <td style="text-align: center">{{ $count }}</td>
                                    <td>{{ $township['township_name'] }}</td>
                                    <td>{{ $township['city_name'] }}</td>
                                    @if ($township['township_is_discontinued'] == 0)
                                        <td><input class="form-check-input" type="checkbox" onclick="return false;"></td>
                                    @elseif ($township['township_is_discontinued'] == 1)
                                        <td><input class="form-check-input" type="checkbox" checked
                                                onclick="return false;">
                                        </td>
                                    @endif
                                    <td><a data-township_id="{{ $township['township_id'] }}"
                                            data-township_name="{{ $township['township_name'] }}"
                                            data-city_id="{{ $township['city_id'] }}"
                                            data-is_discontinued="{{ $township['township_is_discontinued'] }}"
                                            data-bs-toggle="modal" data-bs-target="#edit_township_modal"
                                            class="edit_township_modal_dialog"><i class="fa-solid fa-pen"
                                                style="color: blue; cursor: pointer;"></i></a>
                                    </td>
                                    <td><a data-township_id="{{ $township['township_id'] }}"
                                            data-township_name="{{ $township['township_name'] }}" data-bs-toggle="modal"
                                            data-bs-target="#delete_township_modal"
                                            class="delete_township_modal_dialog"><i class="fa-regular fa-trash-can"
                                                style="color: red;cursor: pointer;"></i></a>
                                    </td>
                                </tr>
                                @php
                                    $count++;
                                @endphp
                            @endforeach
                        @endif
                    </tbody>

                </table>
                <div class="d-flex justify-content-end mt-3">
                    <button type="button" class="btn custom_btn" data-bs-toggle="modal"
                        data-bs-target="#create_township_modal">
                        New Township
                    </button>
                </div>
                <!--Create Township Modal -->
                <div class="modal fade" id="create_township_modal" data-bs-backdrop="static" data-bs-keyboard="false"
                    tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
                    <div class="modal-dialog modal-dialog-centered">
                        <div class="modal-content">
                            <div class="modal-header text-center" style="background-color: #512DA8">
                                <h1 class="modal-title fs-5 w-100" id="staticBackdropLabel" style="color: white">
                                    Township
                                </h1>
                                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"
                                    aria-label="Close"></button>

                            </div>
                            <div class="modal-body" style="margin-left: 20px; margin-right:20px">
                                <form action="{{ route('township#create') }}" method="POST" id="townshipFormCreate">
                                    @csrf
                                    <div class="row align-items-center mb-3 mt-3">
                                        <div class="col-5">
                                            <label class="form-label">City Name</label>
                                        </div>
                                        <div class="col">
                                            <select class="form-select" id="city" name="city">
                                                @if (count($availableCities) != 0)
                                                    @foreach ($availableCities as $availableCity)
                                                        <option value={{ $availableCity['city_id'] }}>
                                                            {{ $availableCity['city_name'] }}</option>
                                                    @endforeach
                                                @endif
                                            </select>
                                        </div>
                                    </div>
                                    <div class="row align-items-center mb-3 mt-3">
                                        <div class="col-5">
                                            <label class="form-label">Township Name</label>
                                        </div>
                                        <div class="col">
                                            <input class="form-control" type="text" id="township_name"
                                                name="township_name">
                                        </div>
                                    </div>
                                    <div class="row align-items-center mb-3">
                                        <div class="col-5">
                                            <label class="form-label text-danger">Discontinued</label>
                                        </div>
                                        <div class="col">
                                            <input class="form-check-input" type="checkbox" name="is_discontinued"
                                                id="is_discontinued">
                                        </div>
                                    </div>
                                </form>
                            </div>
                            <div class="modal-footer" style="margin-right: 20px">
                                <button type="submit" form="townshipFormCreate" class="btn custom_btn">Create</button>
                            </div>
                        </div>
                    </div>
                </div>
                <!--Edit Township Modal -->
                <div class="modal fade" id="edit_township_modal" data-bs-backdrop="static" data-bs-keyboard="false"
                    tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
                    <div class="modal-dialog modal-dialog-centered">
                        <div class="modal-content">
                            <div class="modal-header text-center" style="background-color: #512DA8">
                                <h1 class="modal-title fs-5 w-100" id="staticBackdropLabel" style="color: white">Update
                                    Township
                                </h1>
                                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"
                                    aria-label="Close"></button>
                            </div>
                            <div class="modal-body" style="margin-left: 20px; margin-right:20px">
                                <form action="{{ route('township#update') }}" method="POST" id="townshipFormEdit">
                                    @csrf
                                    <input type="text" name="edit_township_id" id="edit_township_id" hidden>
                                    <div class="row align-items-center mb-3 mt-3">
                                        <div class="col-5">
                                            <label class="form-label">City Name</label>
                                        </div>
                                        <div class="col">
                                            <select class="form-select" id="city" name="city">
                                                @if (count($cities) != 0)
                                                    @foreach ($cities as $city)
                                                        <option value={{ $city['city_id'] }}>
                                                            {{ $city['city_name'] }}</option>
                                                    @endforeach
                                                @endif
                                            </select>
                                        </div>
                                    </div>
                                    <div class="row align-items-center mb-3 mt-3">
                                        <div class="col-5">
                                            <label class="form-label">Township Name</label>
                                        </div>
                                        <div class="col">
                                            <input class="form-control" type="text" id="edit_township_name"
                                                name="edit_township_name">
                                        </div>
                                    </div>
                                    <div class="row align-items-center mb-3">
                                        <div class="col-5">
                                            <label class="form-label text-danger">Discontinued</label>
                                        </div>
                                        <div class="col">
                                            <input class="form-check-input" type="checkbox"
                                                name="edit_township_is_discontinued" id="edit_township_is_discontinued">
                                        </div>
                                    </div>
                                </form>
                            </div>
                            <div class="modal-footer" style="margin-right: 20px">
                                <input type="submit" class="btn custom_btn" value="Update" form="townshipFormEdit">
                            </div>
                        </div>
                    </div>
                </div>
                <!--Delete Township Modal -->
                <div class="modal fade" id="delete_township_modal" data-bs-backdrop="static" data-bs-keyboard="false"
                    tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
                    <div class="modal-dialog modal-dialog-centered">
                        <div class="modal-content">
                            <div class="modal-header text-center" style="background-color: #512DA8">
                                <h1 class="modal-title fs-5 w-100" id="delete_modal_header" style="color: white">
                                </h1>
                                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"
                                    aria-label="Close"></button>

                            </div>
                            <div class="modal-body" style="margin-left: 20px; margin-right:20px">
                                <form action="{{ route('township#delete') }}" method="POST" id="townshipFormDelete">
                                    @csrf
                                    <input type="text" name="delete_township_id" id="delete_township_id" hidden>
                                    <div class="row align-items-center mb-3 mt-3">
                                        <div>
                                            <label class="form-label">Are you sure want to delete?</label>
                                        </div>
                                    </div>
                                </form>
                            </div>
                            <div class="modal-footer" style="margin-right: 20px">
                                <input type="submit" form="townshipFormDelete" class="btn btn-danger" value="Delete">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <script src="{{ asset('script/links_js/jquery.3.6.4.min.js') }}"></script>
    <script src="{{ asset('script/links_js/jquery.validate.1.19.5.js') }}"></script>
    <script src="{{ asset('script/links_js/jquery.dataTables.1.13.7.min.js') }}"></script>
    <script src="{{ asset('script/links_js/dataTables.bootstrap5_1.13.7.min.js') }}"></script>
    <script src="{{ asset('script/links_js/additional_methods.1.19.2.min.js') }}"></script>
    <script src="{{ asset('script/location_script.js') }}"></script>

@endsection