@extends('layouts.user_type.auth')

@section('maintenanceMode')
    <div class="row">
        <div class="col-12">
            @include('components.alert')
            <div class="card mb-4 mx-4">
                <div class="card-header pb-0">
                    <div class="d-flex flex-row justify-content-between">
                        <h5 class="mb-0">Maintenance Mode</h5>

                        <button class="btn bg-gradient-primary btn-sm mb-0" data-bs-toggle="modal"
                            data-bs-target="#maintenanceModal" onclick="clearForm()">+ New Maintenance Mode</button>
                    </div>
                </div>

                <!-- Maintenance Mode Table -->
                <div class="card-body px-0 pt-0 pb-2">
                    <div class="table-responsive p-0">
                        <table class="table align-items-center mb-0">
                            <thead>
                                <tr>
                                    <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">No</th>
                                    <th
                                        class="text-center text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">
                                        ID</th>
                                    <th
                                        class="text-center text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">
                                        Is Maintenance Mode</th>
                                    <th
                                        class="text-center text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">
                                        Maintenance Message</th>
                                    <th
                                        class="text-center text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">
                                        Status</th>
                                    <th
                                        class="text-center text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">
                                        Actions</th>
                                </tr>
                            </thead>
                            <tbody>
                                @forelse($maintenanceSettings as $index => $maintenance)
                                    <tr>
                                        <td class="ps-4">
                                            <p class="text-xs font-weight-bold mb-0">
                                                {{ $maintenanceSettings->firstItem() + $index }}
                                            </p>
                                        </td>
                                        <td class="text-center">
                                            <p class="text-xs font-weight-bold mb-0">{{ $maintenance->id }}</p>
                                        </td>
                                        <td class="text-center">
                                            <input type="checkbox" disabled
                                                {{ $maintenance->is_maintenance_mode ? 'checked' : '' }}>
                                        </td>
                                        <td class="text-center">
                                            <p class="text-xs font-weight-bold mb-0">{{ $maintenance->maintenance_message }}
                                            </p>
                                        </td>
                                        <td class="text-center">
                                            <span
                                                class="badge badge-sm 
                                            {{ $maintenance->status == 'inactive' ? 'bg-gradient-danger' : 'bg-gradient-success' }}">
                                                {{ ucfirst($maintenance->status) }}
                                            </span>
                                        </td>
                                        <td class="text-center">
                                            <a href="#" class="mx-3" data-bs-toggle="modal"
                                                data-bs-target="#maintenanceModal"
                                                onclick="openEditModal({{ json_encode($maintenance) }})">
                                                <i class="fas fa-edit text-secondary"></i>
                                            </a>
                                            <span>
                                                @if ($maintenance->status !== 'inactive')
                                                    <form method="POST"
                                                        action="{{ route('maintenanceMode.delete', $maintenance->id) }}"
                                                        style="display:inline;">
                                                        @csrf
                                                        @method('DELETE')
                                                        <button type="submit" title="Delete Maintenance"
                                                            style="background: none; border: none; padding: 0; cursor: pointer;"
                                                            onclick="return confirm('Are you sure you want to delete this maintenance mode setting?');">
                                                            <i class="fas fa-trash text-secondary"
                                                                data-bs-toggle="tooltip"></i>
                                                        </button>
                                                    </form>
                                                @endif
                                            </span>
                                        </td>
                                    </tr>
                                @empty
                                    <tr>
                                        <td colspan="6" class="text-center py-5">
                                            <img src="{{ asset('assets/img/no_data_found.png') }}" alt="No Data Found"
                                                style="width: 200px; opacity: 0.6;">
                                            <p class="mt-2 text-muted">No data Found</p>
                                        </td>
                                    </tr>
                                @endforelse
                            </tbody>
                        </table>
                        @include('components.pagination', ['paginator' => $maintenanceSettings])
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- Modal for Creating or Editing Maintenance Mode -->
    <div class="modal fade" id="maintenanceModal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="maintenanceModalLabel">Edit Maintenance Mode</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <form id="mainForm" method="POST" action="{{ route('maintenanceMode.storeOrUpdate') }}">
                        @csrf
                        <input type="hidden" id="m_id" name="m_id">

                        <!-- Toggle Maintenance Mode -->
                        <div class="mb-3 form-check form-switch">
                            <input class="form-check-input" type="checkbox" id="is_maintenance_mode"
                                name="is_maintenance_mode" value="1">
                            <label class="form-check-label" for="is_maintenance_mode">Enable Maintenance Mode</label>
                        </div>

                        <!-- Maintenance Message -->
                        <div class="mb-3">
                            <label for="maintenance_message" class="form-label">Maintenance Message</label>
                            <textarea class="form-control" id="maintenance_message" name="maintenance_message" rows="3"></textarea>
                        </div>

                        <!-- Restriction Toggles -->
                        <div class="mb-3">
                            <label class="form-label">Restrict Operations</label>
                            <div class="form-check">
                                <input class="form-check-input" type="checkbox" id="restrict_create" name="restrict_create"
                                    value="1">
                                <label class="form-check-label" for="restrict_create">Restrict Create</label>
                            </div>
                            <div class="form-check">
                                <input class="form-check-input" type="checkbox" id="restrict_update" name="restrict_update"
                                    value="1">
                                <label class="form-check-label" for="restrict_update">Restrict Update</label>
                            </div>
                            <div class="form-check">
                                <input class="form-check-input" type="checkbox" id="restrict_delete"
                                    name="restrict_delete" value="1">
                                <label class="form-check-label" for="restrict_delete">Restrict Delete</label>
                            </div>
                        </div>
                        <!-- Status Field -->
                        <div class="mb-3">
                            <label for="status" class="form-label">Status</label>
                            <select class="form-select" id="status" name="status">
                                <option value="active">Active</option>
                                <option value="inactive">Inactive</option>
                            </select>
                        </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                    <button type="submit" class="btn btn-primary">Save</button>
                </div>
                </form>
            </div>
        </div>
    </div>
    </div>

    <script>
        function clearForm() {
            const form = document.getElementById('mainForm');
            form.reset();

            // Reset hidden input ID
            document.getElementById('m_id').value = '';

            // Reset modal title
            document.getElementById('maintenanceModalLabel').innerText = "Add New Maintenance Setting";

            // Ensure checkboxes are unchecked when adding a new entry
            document.getElementById('is_maintenance_mode').checked = true;
            document.getElementById('restrict_create').checked = true;
            document.getElementById('restrict_update').checked = true;
            document.getElementById('restrict_delete').checked = true;
            document.getElementById('status').value = 'active';
        }

        function openEditModal(setting) {
            const form = document.getElementById('mainForm');

            // Populate form fields with existing data
            document.getElementById('m_id').value = setting.id;
            document.getElementById('maintenance_message').value = setting.maintenance_message;
            document.getElementById('is_maintenance_mode').checked = setting.is_maintenance_mode == 1;
            document.getElementById('restrict_create').checked = setting.restrict_create == 1;
            document.getElementById('restrict_update').checked = setting.restrict_update == 1;
            document.getElementById('restrict_delete').checked = setting.restrict_delete == 1;
            document.getElementById('status').value = setting.status;

            // Update modal title
            document.getElementById('maintenanceModalLabel').innerText = "Edit Maintenance Setting";
        }
    </script>
@endsection