@extends('admin.app')

@section('content')

<div class="container-fluid px-3 mt-4">

<h2 class="mb-4">Location Management</h2>

@if(session('success'))
    <div class="alert alert-success">
        {{ session('success') }}
    </div>
@endif

<!-- Add Location -->
<div class="card mb-4">

    <div class="card-header">
        <h5 class="mb-0">Add Location</h5>
    </div>

    <div class="card-body">

        <form action="{{ route('locations.store') }}" method="POST">
            @csrf

            <div class="row">

                <div class="col-md-10">
                    <input type="text"
                           name="name"
                           class="form-control"
                           placeholder="Enter Location Name"
                           required>
                </div>

                <div class="col-md-2">
                    <button type="submit"
                            class="btn btn-primary w-100">
                        Add Location
                    </button>
                </div>

            </div>

        </form>

    </div>

</div>

<!-- Location List -->
<div class="card">

    <div class="card-header">
        <h5 class="mb-0">Location List</h5>
    </div>

    <div class="card-body">

        <div class="table-responsive">

            <table class="table table-bordered table-striped w-100"
                   id="locationTable">

                <thead>
                    <tr>
                        <th>#</th>
                        <th>Location Name</th>
                        <th width="200">Action</th>
                    </tr>
                </thead>

                <tbody>

                    @forelse($locations as $location)

                    <tr>

                        <td>{{ $loop->iteration }}</td>

                        <td>{{ $location->name }}</td>

                        <td>

                            <button class="btn btn-warning btn-sm"
                                    data-bs-toggle="modal"
                                    data-bs-target="#editModal{{ $location->id }}">
                                Edit
                            </button>

                            <form action="{{ route('locations.destroy',$location->id) }}"
                                  method="POST"
                                  class="d-inline"
                                  onsubmit="return confirm('Delete this location?')">

                                @csrf
                                @method('DELETE')

                                <button type="submit"
                                        class="btn btn-danger btn-sm">
                                    Delete
                                </button>

                            </form>

                        </td>

                    </tr>

                    <!-- Edit Modal -->
                    <div class="modal fade"
                         id="editModal{{ $location->id }}"
                         tabindex="-1">

                        <div class="modal-dialog">

                            <div class="modal-content">

                                <form action="{{ route('locations.update',$location->id) }}"
                                      method="POST">

                                    @csrf
                                    @method('PUT')

                                    <div class="modal-header">

                                        <h5 class="modal-title">
                                            Edit Location
                                        </h5>

                                        <button type="button"
                                                class="btn-close"
                                                data-bs-dismiss="modal">
                                        </button>

                                    </div>

                                    <div class="modal-body">

                                        <input type="text"
                                               name="name"
                                               value="{{ $location->name }}"
                                               class="form-control"
                                               required>

                                    </div>

                                    <div class="modal-footer">

                                        <button type="submit"
                                                class="btn btn-primary">
                                            Update Location
                                        </button>

                                    </div>

                                </form>

                            </div>

                        </div>

                    </div>

                    @empty

                    <tr>
                        <td colspan="3" class="text-center">
                            No Locations Found
                        </td>
                    </tr>

                    @endforelse

                </tbody>

            </table>

        </div>

    </div>

</div>

</div>

@endsection

@push('styles')

<style>

#locationTable{
    width:100% !important;
}

table.dataTable{
    width:100% !important;
}

.dataTables_wrapper{
    width:100%;
}

.card{
    border-radius:10px;
}

</style>

@endpush

@push('scripts')

<script>

$(document).ready(function () {

    $('#locationTable').DataTable({
        pageLength: 10,
        ordering: true,
        searching: true,
        responsive: true,
        autoWidth: false
    });

});

</script>

@endpush