@extends('layouts.app')

@section('title', 'Master Dropdowns')

@section('page-specific-style')
<!-- DataTables -->
<link href="{{ asset('assets/libs/datatables.net-bs4/css/dataTables.bootstrap4.min.css') }}" rel="stylesheet" type="text/css" />
<link href="{{ asset('assets/libs/datatables.net-buttons-bs4/css/buttons.bootstrap4.min.css') }}" rel="stylesheet" type="text/css" />
<link href="{{ asset('assets/libs/datatables.net-responsive-bs4/css/responsive.bootstrap4.min.css') }}" rel="stylesheet" type="text/css" />
@endsection

@section('content')
<div class="container-fluid">
    <div class="row">
        <div class="col-12">
            <div class="d-flex justify-content-between align-items-center mb-3">
                <h4 class="mb-0">Master Dropdowns</h4>
                <a href="{{ route('master_dropdowns.create') }}" class="btn btn-primary">Add Dropdown</a>
            </div>
            <div class="card">
                <div class="card-body">
                    @include('includes.alerts')
                    <table id="master-dropdowns-datatable" class="table table-bordered dt-responsive nowrap w-100">
                        <thead>
                            <tr>
                                <th>Name</th>
                                <th>Code</th>
                                <th>Status</th>
                                <th>Note</th>
                                <th>Actions</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach($dropdowns as $dropdown)
                            <tr>
                                <td>{{ $dropdown->name }}</td>
                                <td>{{ $dropdown->code }}</td>
                                <td>{{ $dropdown->is_active ? 'Active' : 'Inactive' }}</td>
                                <td>{{ $dropdown->note }}</td>
                                <td>
                                    <a href="{{ route('master_dropdowns.edit', $dropdown->id) }}" class="btn btn-warning btn-sm"><i class="fas fa-edit"></i></a>
                                    <button class="btn btn-danger btn-sm" data-bs-toggle="modal" data-bs-target="#deleteModal" data-dropdown-id="{{ $dropdown->id }}" data-dropdown-name="{{ $dropdown->name }}"><i class="fa fa-trash"></i></button>
                                </td>
                            </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Delete Confirmation Modal -->
<div class="modal fade" id="deleteModal" tabindex="-1" aria-labelledby="deleteModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="deleteModalLabel">Confirm Deletion</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                Are you sure you want to delete the dropdown "<span id="dropdown-name"></span>"?
            </div>
            <div class="modal-footer">
                <form id="delete-form" action="" method="POST">
                    @csrf
                    @method('DELETE')
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                    <button type="submit" class="btn btn-danger">Delete</button>
                </form>
            </div>
        </div>
    </div>
</div>
@endsection

@section('page-specific-script')
<script src="{{ asset('assets/libs/datatables.net/js/jquery.dataTables.min.js') }}"></script>
<script src="{{ asset('assets/libs/datatables.net-bs4/js/dataTables.bootstrap4.min.js') }}"></script>
<script src="{{ asset('assets/libs/datatables.net-responsive/js/dataTables.responsive.min.js') }}"></script>
<script src="{{ asset('assets/libs/datatables.net-responsive-bs4/js/responsive.bootstrap4.min.js') }}"></script>
{{-- <script src="{{ asset('assets/js/pages/datatables.init.js') }}"></script> --}}

<script>
    document.addEventListener('DOMContentLoaded', function () {
        $('#master-dropdowns-datatable').DataTable({
            responsive: true,
            lengthChange: false
        });

        var deleteModal = document.getElementById('deleteModal');
        deleteModal.addEventListener('show.bs.modal', function (event) {
            var button = event.relatedTarget;
            var dropdownId = button.getAttribute('data-dropdown-id');
            var dropdownName = button.getAttribute('data-dropdown-name');

            var modalTitle = deleteModal.querySelector('.modal-title');
            var dropdownNameSpan = deleteModal.querySelector('#dropdown-name');
            var deleteForm = deleteModal.querySelector('#delete-form');

            modalTitle.textContent = 'Confirm Deletion';
            dropdownNameSpan.textContent = dropdownName;
            deleteForm.action = '/master-dropdowns/delete/' + dropdownId; // Update form action
        });
    });
</script>
@endsection