@extends('Admin.layouts.master')

@section('content')
    @php
        $currentPage = 'manage-location';
    @endphp
<div class="layout-px-spacing">
        <div class="middle-content container-xxl p-0">
            <div class="row layout-top-spacing ">
                <div class="top-tabel">
                    <div class="row">
                        <div class="col-md-4">
                            <h6 class="card-title">Manage States</h6>
                        </div>
                        <div class="col-md-8">

                        </div>
                    </div>
                </div>
                <div class="col-xl-12 col-lg-12 col-sm-12 layout-spacing">
                    <div class="widget-content widget-content-area br-8 position-btn" style="overflow: auto;">
                        <table id="zero-config" class="table dt-table-hover location_table" style="width:100%">
                            <thead class="text-center">
                                <meta name="csrf-token" content="{{ csrf_token() }}">
                                <tr>
                                    <th class="text-center">Sr no</th>
                                    <th class="text-center">Location</th>
                                    <th class="no-content">Status</th>

                                    <th class="no-content">Action</th>
                                </tr>
                            </thead>
                            <tbody class="text-center">
                                @foreach ($location as $locations)
                                    <tr>
                                        <td class="text-center">{{ $loop->iteration}}</td>
                                        <td class="text-center">{{ $locations->name }}</td>
                                        <td class="text-start">
                                        <div class="switch-btn">
                                                            <input
                                                                type="checkbox" data-id = "{{ $locations->id }}"
                                                                class="active_location" id="switch{{ $locations->id }}" value="1"
                                                                  {{ $locations->is_active ? 'checked' : '' }}
                                                                switch="bool" />
                                                            <label for="switch{{ $locations->id }}" data-on-label="Active"
                                                                data-off-label="Expired"></label>
                                                        </div>
                                        </td>
                                        <td>
                                            <div class="dropout">
                                                <button class="more">
                                                    <span></span>
                                                    <span></span>
                                                    <span></span>
                                                </button>
                                                <ul>
                                                    <li>
                                                        <!-- <div class="switch-btn">
                                                            <input
                                                                type="checkbox" data-id = "{{ $locations->id }}"
                                                                class="active_location" id="switch{{ $locations->id }}" value="1"
                                                                  {{ $locations->is_active ? 'checked' : '' }}
                                                                switch="bool" />
                                                            <label for="switch{{ $locations->id }}" data-on-label="Active"
                                                                data-off-label="Expired"></label>
                                                        </div> -->
                                                    </li>
                                                    <li>
                                                        <a href="#" data-toggle="modal" data-target="#edit-location-modal"
                                                            class="edit_location_value" data-location-id="{{ $locations->id }}"
                                                            data-location-name="{{ $locations->name }}" >
                                                            <img src="{{ asset('public/assets/img/edit.svg') }}" />
                                                            <span>Edit</span>
                                                        </a>

                                                    </li>
                                                    <li>
                                                        <a class="delete_location" data-id="{{ $locations->id }}" data-toggle="modal" data-target="#delete-location-modal">
                                                            <img
                                                                src="{{ asset('public/assets/img/delete-recycle.svg') }}" />
                                                            <span>Delete</span>
                                                        </a>
                                                    </li>

                                                </ul>
                                            </div>
                                        </td>
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                </div>

            </div>
        </div>
    </div>

    <div class="modal fade" id="add_location_modal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
        aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered" role="document">
            <div class="modal-content">
                <div class="modal-body">
                    <div class="modal-header p-0">
                        <h5 class="modal-title">Add State</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="row">
                        <form id="store_location">
                            @csrf
                            <div class="col-md-12 ">
                                <label for="add-faq-question">Name</label>
                                <input id="add_faq_question" name="location_name" class="form-control" type="text">
                            </div>
                            <button type="submit" id="submit_location" class="download-btn-custom mt-4 mx-auto w-25">
                                <span>Save</span>
                            </button>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="modal fade" id="edit-location-modal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
        aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered" role="document">
            <div class="modal-content">
                <div class="modal-body">
                    <div class="modal-header p-0">
                        <h5 class="modal-title">Edit state</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="row">
                        <form id="edit_location">
                            <div class="col-md-12 mb-3">
                                @csrf
                                <input class="form-control" name="id" type="hidden"
                                    value="" id="location_id">
                                <label for="">Name</label>
                                <input class="form-control" name="location_name" type="text"
                                    value="" id="name">
                            </div>
                            <button type="submit" id="update_location" class="download-btn-custom mt-4 mx-auto w-25">
                                <span>Save</span>
                            </button>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="modal fade" id="delete-location-modal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
        aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="btn-close" data-dismiss="modal" aria-label="Close">
                        x
                    </button>
                </div>
                <div class="modal-body">
                    <input type="hidden" id="delete_location_id" name="location_id">
                    <p class="modal-text">Are you sure you want to<br>Delete </p>
                    <div class="modal-btn d-flex ">
                        <a type="button" class="extra-btn" data-dismiss="modal">No</a>
                        <a type="button" class="download-btn-custom delete_location_button"  data-dismiss="modal">Yes</a>
                    </div>

                </div>
            </div>
        </div>
    </div>
@endsection
@section('section_script')
    <script src="{{ asset('public/assets/js/admin/manage_location/main.js') }}"></script>
    <script src="{{ asset('public/assets/js/admin/manage_location/add_location.js') }}"></script>
    <script src="{{ asset('public/assets/js/admin/manage_location/edit_location.js') }}"></script>
    <script>
        $(document).ready(function() {
            $(' <button><a class="extra-btn width-max-content" data-toggle="modal" data-target="#add_location_modal" href="">Add</a></button>')
                .insertBefore("#zero-config_filter label");
        });
    </script>
@endsection
