@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>
                <button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#createDropdownModal">Add Dropdown</button>
            </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>Slug</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>
                                    <button class="btn btn-warning btn-sm edit-btn"
                                        data-bs-toggle="modal"
                                        data-bs-target="#editDropdownModal"
                                        data-dropdown-id="{{ $dropdown->id }}"
                                        data-dropdown-name="{{ $dropdown->name }}"
                                        data-dropdown-code="{{ $dropdown->code }}"
                                        data-dropdown-values="{{ json_encode($dropdown->items->pluck('value')->toArray()) }}"
                                        data-dropdown-status="{{ $dropdown->is_active ? '1' : '0' }}"
                                        data-dropdown-note="{{ $dropdown->note }}">
                                        <i class="fas fa-edit"></i>
                                    </button>
                                    <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>

<!-- Create Dropdown Modal -->
<div class="modal fade" id="createDropdownModal" tabindex="-1" aria-labelledby="createDropdownModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="createDropdownModalLabel">Create Master Dropdown</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <form action="{{ route('master_dropdowns.store') }}" method="POST">
                    @csrf
                    <div class="mb-3">
                        <label for="create-name" class="form-label">Name</label>
                        <input type="text" class="form-control" id="create-name" name="name" value="{{ old('name') }}" placeholder="Enter name" required>
                        @error('name')
                            <div class="text-danger">{{ $message }}</div>
                        @enderror
                    </div>
                    <div class="mb-3">
                        <label for="create-code" class="form-label">Slug</label>
                        <input type="text" class="form-control" id="create-code" name="code" value="{{ old('code') }}" placeholder="Enter slug" required>
                        @error('code')
                            <div class="text-danger">{{ $message }}</div>
                        @enderror
                    </div>
                    <div class="mb-3">
                        <label for="create-value" class="form-label">Values</label>
                        <div id="create-value-container">
                            <div class="input-group mb-2">
                                <input type="text" class="form-control value-input" name="values[]" placeholder="Enter value" required>
                                <button type="button" class="btn btn-outline-secondary add-value"><i class="fas fa-plus"></i></button>
                                <button type="button" class="btn btn-outline-danger remove-value d-none"><i class="fas fa-minus"></i></button>
                            </div>
                        </div>
                        @error('values.*')
                            <div class="text-danger">{{ $message }}</div>
                        @enderror
                    </div>
                    <div class="form-check form-switch form-switch-lg mb-3" dir="ltr">
                        <input class="form-check-input" type="checkbox" id="create-isActive" name="isActive" {{ old('isActive', 1) ? 'checked' : '' }}>
                        <label class="form-check-label" for="create-isActive">Status</label>
                    </div>
                    <div class="mb-3">
                        <label for="create-note" class="form-label">Note</label>
                        <textarea class="form-control" id="create-note" name="note" placeholder="Enter note">{{ old('note') }}</textarea>
                    </div>
                    <button type="submit" class="btn btn-primary">Save</button>
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                </form>
            </div>
        </div>
    </div>
</div>

<!-- Edit Dropdown Modal -->
<div class="modal fade" id="editDropdownModal" tabindex="-1" aria-labelledby="editDropdownModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="editDropdownModalLabel">Edit Master Dropdown</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <form id="edit-form" action="" method="POST">
                    @csrf
                    @method('PUT')
                    <input type="hidden" id="edit-dropdown-id" name="id">
                    <div class="mb-3">
                        <label for="edit-name" class="form-label">Name</label>
                        <input type="text" class="form-control" id="edit-name" name="name" required>
                    </div>
                    <div class="mb-3">
                        <label for="edit-code" class="form-label">Slug</label>
                        <input type="text" class="form-control" id="edit-code" name="code" required>
                    </div>
                    <div class="mb-3">
                        <label for="edit-value" class="form-label">Values</label>
                        <div id="edit-value-container">
                            <!-- Values will be dynamically added here -->
                        </div>
                    </div>
                    <div class="form-check form-switch form-switch-lg mb-3" dir="ltr">
                        <input class="form-check-input" type="checkbox" id="edit-isActive" name="isActive">
                        <label class="form-check-label" for="edit-isActive">Status</label>
                    </div>
                    <div class="mb-3">
                        <label for="edit-note" class="form-label">Note</label>
                        <textarea class="form-control" id="edit-note" name="note"></textarea>
                    </div>
                    <button type="submit" class="btn btn-primary">Update</button>
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                </form>
            </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>
    document.addEventListener('DOMContentLoaded', function () {
        // Initialize DataTables
        $('#master-dropdowns-datatable').DataTable({
            responsive: true,
            lengthChange: false
        });

        // Handle Edit Modal
        var editModal = document.getElementById('editDropdownModal');
        editModal.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 dropdownCode = button.getAttribute('data-dropdown-code');
            var dropdownValues = button.getAttribute('data-dropdown-values');
            var dropdownStatus = button.getAttribute('data-dropdown-status');
            var dropdownNote = button.getAttribute('data-dropdown-note');

            var form = editModal.querySelector('#edit-form');
            var idField = editModal.querySelector('#edit-dropdown-id');
            var nameField = editModal.querySelector('#edit-name');
            var codeField = editModal.querySelector('#edit-code');
            var valueContainer = editModal.querySelector('#edit-value-container');
            var statusField = editModal.querySelector('#edit-isActive');
            var noteField = editModal.querySelector('#edit-note');

            idField.value = dropdownId;
            nameField.value = dropdownName;
            codeField.value = dropdownCode;
            noteField.value = dropdownNote;
            statusField.checked = dropdownStatus === '1';

            // Clear existing values and add existing ones
            valueContainer.innerHTML = '';
            JSON.parse(dropdownValues).forEach(value => {
                const inputGroup = document.createElement('div');
                inputGroup.className = 'input-group mb-2';
                inputGroup.innerHTML = `
                    <input type="text" class="form-control value-input" name="values[]" value="${value}" placeholder="Enter value" required>
                    <button type="button" class="btn btn-outline-secondary add-value"><i class="fas fa-plus"></i></button>
                    <button type="button" class="btn btn-outline-danger remove-value"><i class="fas fa-minus"></i></button>
                `;
                valueContainer.appendChild(inputGroup);
            });

            // Add button for adding new values
            // const addButton = document.createElement('div');
            // addButton.className = 'input-group mb-2';
            // addButton.innerHTML = `
            //     <button type="button" class="btn btn-outline-secondary add-value"><i class="fas fa-plus"></i></button>
            // `;
            // valueContainer.appendChild(addButton);

            // Update form action
            form.action = `/master-dropdowns/update/${dropdownId}`;
        });

        // Handle Create Modal Value Add/Remove
        document.querySelector('#create-value-container').addEventListener('click', function (e) {
            if (e.target.classList.contains('add-value')) {
                e.preventDefault();
                const inputGroup = document.createElement('div');
                inputGroup.className = 'input-group mb-2';
                inputGroup.innerHTML = `
                    <input type="text" class="form-control value-input" name="values[]" placeholder="Enter value" required>
                    <button type="button" class="btn btn-outline-secondary add-value"><i class="fas fa-plus"></i></button>
                    <button type="button" class="btn btn-outline-danger remove-value d-none"><i class="fas fa-minus"></i></button>
                `;
                this.appendChild(inputGroup);
                updateRemoveButtonVisibility(this);
            }

            if (e.target.classList.contains('remove-value')) {
                e.preventDefault();
                e.target.closest('.input-group').remove();
                updateRemoveButtonVisibility(this);
            }
        });

        // Handle Edit Modal Value Add/Remove
        document.querySelector('#edit-value-container').addEventListener('click', function (e) {
            if (e.target.classList.contains('add-value')) {
                e.preventDefault();
                const inputGroup = document.createElement('div');
                inputGroup.className = 'input-group mb-2';
                inputGroup.innerHTML = `
                    <input type="text" class="form-control value-input" name="values[]" placeholder="Enter value" required>
                    <button type="button" class="btn btn-outline-secondary add-value"><i class="fas fa-plus"></i></button>
                    <button type="button" class="btn btn-outline-danger remove-value"><i class="fas fa-minus"></i></button>
                `;
                this.appendChild(inputGroup);
                updateRemoveButtonVisibility(this);
            }

            if (e.target.classList.contains('remove-value')) {
                e.preventDefault();
                e.target.closest('.input-group').remove();
                updateRemoveButtonVisibility(this);
            }
        });

        // Handle Delete Modal
        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 form = deleteModal.querySelector('#delete-form');
            var nameField = deleteModal.querySelector('#dropdown-name');

            nameField.textContent = dropdownName;
            form.action = `/master-dropdowns/${dropdownId}`;
        });

        // Function to update visibility of remove button
        function updateRemoveButtonVisibility(container) {
            const inputGroups = container.querySelectorAll('.input-group');
            const removeButtons = container.querySelectorAll('.remove-value');
            removeButtons.forEach(button => button.classList.toggle('d-none', inputGroups.length <= 1));
        }
    });
</script>
@endsection