@extends('layout.super-admin-two')

@section('title', 'Delete Organizational Unit')

@section('content')
    <div class="page-header">
        <div>
            <h1><i class="bi bi-trash3"></i> Delete Organizational Unit</h1>
            <p class="text-muted">Permanently remove unit from system</p>
        </div>
    </div>

    {{-- Breadcrumb --}}
    <nav aria-label="breadcrumb" class="mb-4">
        <ol class="breadcrumb bg-light p-3 rounded-3">
            <li class="breadcrumb-item"><a href="{{ route('admin.organizational-units') }}">Organizational Units</a></li>
            <li class="breadcrumb-item"><a href="{{ route('admin.organizational-units.show', $station->id) }}">{{ $station->station_name }}</a></li>
            <li class="breadcrumb-item active">Delete</li>
        </ol>
    </nav>

    <div class="row">
        <div class="col-lg-8 offset-lg-2">
            {{-- Critical Warning --}}
            <div class="alert alert-danger alert-dismissible fade show mb-4" role="alert">
                <div class="d-flex align-items-center gap-3">
                    <div style="font-size: 2rem;">
                        <i class="bi bi-exclamation-triangle-fill"></i>
                    </div>
                    <div>
                        <h5 class="alert-heading mb-1">
                            This action cannot be undone!
                        </h5>
                        <p class="mb-0">
                            You are about to permanently delete this organizational unit and all its data from the system.
                        </p>
                    </div>
                </div>
                <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
            </div>

            {{-- Unit Information Card --}}
            <div class="card shadow-sm border-0 mb-4">
                <div class="card-header bg-light border-bottom">
                    <h6 class="mb-0">
                        <i class="bi bi-info-circle"></i> Unit to be deleted
                    </h6>
                </div>
                <div class="card-body">
                    <div class="row mb-3">
                        <div class="col-md-6">
                            <div class="info-box p-3 bg-light rounded-3">
                                <h6 class="text-muted small fw-bold text-uppercase mb-2">Name</h6>
                                <p class="mb-0" style="font-size: 1.1rem; font-weight: bold; color: #dc3545;">
                                    {{ $station->station_name }}
                                </p>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="info-box p-3 bg-light rounded-3">
                                <h6 class="text-muted small fw-bold text-uppercase mb-2">Type</h6>
                                <p class="mb-0">
                                    <span class="badge badge-level-{{ $station->stationType->authority_level }} rounded-pill">
                                        {{ $station->stationType->shortcode }}
                                    </span>
                                    <br>
                                    <small class="text-muted">{{ $station->stationType->name }}</small>
                                </p>
                            </div>
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-md-6">
                            <div class="info-box p-3 bg-light rounded-3">
                                <h6 class="text-muted small fw-bold text-uppercase mb-2">Short Name</h6>
                                <p class="mb-0">
                                    <code style="font-size: 1.1rem; font-weight: bold;">
                                        {{ $station->names()->first()?->shortname ?? 'N/A' }}
                                    </code>
                                </p>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="info-box p-3 bg-light rounded-3">
                                <h6 class="text-muted small fw-bold text-uppercase mb-2">Hierarchy</h6>
                                <p class="mb-0">
                                    <code style="font-size: 0.85rem; word-break: break-word;">
                                        {{ $station->getHierarchyPath() }}
                                    </code>
                                </p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            {{-- Children Warning --}}
            @if($station->hasChildren())
                <div class="card shadow-sm border-danger border-2 mb-4">
                    <div class="card-header bg-danger text-white">
                        <h6 class="mb-0">
                            <i class="bi bi-exclamation-circle-fill"></i> This unit has child stations!
                        </h6>
                    </div>
                    <div class="card-body">
                        <p class="mb-3">
                            Deleting <strong>{{ $station->station_name }}</strong> will also permanently delete:
                        </p>
                        <div class="list-group mb-3">
                            <div class="list-group-item bg-light">
                                <div class="d-flex align-items-center gap-2">
                                    <i class="bi bi-diagram-3 text-danger" style="font-size: 1.5rem;"></i>
                                    <div>
                                        <h6 class="mb-0">{{ $station->getChildCount() }} Direct Child Unit(s)</h6>
                                        <small class="text-muted">These will be deleted along with all their descendants</small>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <h6 class="mb-2">Child units:</h6>
                        <div class="table-responsive mb-0">
                            <table class="table table-sm table-hover mb-0">
                                <thead class="table-light">
                                    <tr>
                                        <th>Name</th>
                                        <th>Type</th>
                                        <th>Children</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach($station->children()->with('stationType', 'names')->get() as $child)
                                        <tr class="table-danger-light">
                                            <td>
                                                <strong>{{ $child->station_name }}</strong>
                                                <br>
                                                <small class="text-muted">{{ $child->names()->first()?->shortname }}</small>
                                            </td>
                                            <td>
                                                <span class="badge badge-level-{{ $child->stationType->authority_level }} rounded-pill">
                                                    {{ $child->stationType->shortcode }}
                                                </span>
                                            </td>
                                            <td>
                                                @if($child->hasChildren())
                                                    <span class="badge bg-secondary rounded-pill">
                                                        {{ $child->getChildCount() }}
                                                    </span>
                                                @else
                                                    <span class="text-muted">—</span>
                                                @endif
                                            </td>
                                        </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            @else
                <div class="alert alert-info alert-sm mb-4" role="alert">
                    <i class="bi bi-check-circle"></i>
                    <strong>No child stations.</strong> Only this unit will be deleted.
                </div>
            @endif

            {{-- Confirmation Input --}}
            <div class="card shadow-sm border-0 mb-4">
                <div class="card-header bg-light border-bottom">
                    <h6 class="mb-0">
                        <i class="bi bi-shield-exclamation"></i> Type "DELETE" to confirm
                    </h6>
                </div>
                <div class="card-body">
                    <p class="text-muted mb-3">
                        To prevent accidental deletion, please type <strong>"DELETE"</strong> below to confirm:
                    </p>
                    <input type="text" 
                           id="confirmInput" 
                           class="form-control form-control-lg border-2" 
                           placeholder="Type DELETE here"
                           autocomplete="off"
                           style="letter-spacing: 3px; font-weight: 500;">
                    <div class="mt-2">
                        <small class="text-muted">
                            You must type exactly <strong>"DELETE"</strong> (case-sensitive) to confirm this action.
                        </small>
                    </div>
                </div>
            </div>

            {{-- Action Buttons --}}
            <div class="d-grid gap-2 d-sm-flex mb-4">
                <form action="{{ route('admin.organizational-units.destroy', $station->id) }}" 
                      method="POST" 
                      id="deleteForm"
                      style="display: none; width: 100%;">
                    @csrf
                    @method('DELETE')
                </form>

                <button type="button" 
                        id="deleteBtn"
                        class="btn btn-danger btn-lg flex-grow-1" 
                        disabled
                        onclick="confirmDelete()"
                        style="opacity: 0.5; cursor: not-allowed;">
                    <i class="bi bi-trash-fill"></i> Permanently Delete
                </button>
                
                <a href="{{ route('admin.organizational-units.show', $station->id) }}" 
                   class="btn btn-secondary btn-lg flex-grow-1">
                    <i class="bi bi-x-circle"></i> Cancel
                </a>
            </div>

            {{-- Info Box --}}
            <div class="card shadow-sm border-0 bg-light">
                <div class="card-body">
                    <h6 class="fw-bold mb-3">
                        <i class="bi bi-lightbulb"></i> Important Information
                    </h6>
                    <ul class="mb-0 small text-muted">
                        <li class="mb-2">
                            <i class="bi bi-exclamation-triangle text-danger"></i>
                            <strong>This deletion is permanent</strong> and cannot be recovered
                        </li>
                        <li class="mb-2">
                            <i class="bi bi-exclamation-triangle text-danger"></i>
                            <strong>All child stations</strong> will be automatically deleted
                        </li>
                        <li class="mb-2">
                            <i class="bi bi-exclamation-triangle text-danger"></i>
                            <strong>All associated data</strong> and records will be removed
                        </li>
                        <li>
                            <i class="bi bi-file-earmark-check text-success"></i>
                            A deletion record will be logged for audit purposes
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>

    <script>
        const confirmInput = document.getElementById('confirmInput');
        const deleteBtn = document.getElementById('deleteBtn');
        const deleteForm = document.getElementById('deleteForm');

        confirmInput.addEventListener('input', function() {
            const isValid = this.value === 'DELETE';
            deleteBtn.disabled = !isValid;
            
            if (isValid) {
                deleteBtn.style.opacity = '1';
                deleteBtn.style.cursor = 'pointer';
            } else {
                deleteBtn.style.opacity = '0.5';
                deleteBtn.style.cursor = 'not-allowed';
            }
        });

        function confirmDelete() {
            if (confirmInput.value === 'DELETE') {
                deleteForm.submit();
            }
        }

        // Allow Enter key to submit
        confirmInput.addEventListener('keypress', function(e) {
            if (e.key === 'Enter' && this.value === 'DELETE') {
                confirmDelete();
            }
        });
    </script>

    <style>
        /* Level badges */
        .badge-level-1 {
            background: linear-gradient(135deg, #6f42c1 0%, #7c52d4 100%);
            color: white;
        }

        .badge-level-2 {
            background: linear-gradient(135deg, #0d6efd 0%, #0d47a1 100%);
            color: white;
        }

        .badge-level-3 {
            background: linear-gradient(135deg, #198754 0%, #0f5e30 100%);
            color: white;
        }

        .badge-level-4 {
            background: linear-gradient(135deg, #fd7e14 0%, #ff9800 100%);
            color: white;
        }

        .badge-level-5 {
            background: linear-gradient(135deg, #dc3545 0%, #c82333 100%);
            color: white;
        }

        .badge-level-6 {
            background: linear-gradient(135deg, #6c757d 0%, #495057 100%);
            color: white;
        }

        /* Info boxes */
        .info-box {
            border-left: 4px solid #0d6efd;
        }

        /* Table styling */
        .table-danger-light {
            background-color: #f8d7da;
        }

        .table-danger-light:hover {
            background-color: #f5c6cb;
        }

        /* Card animations */
        .card {
            transition: all 0.3s ease;
        }

        .card:hover {
            transform: translateY(-2px);
            box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1) !important;
        }

        /* Form control */
        .form-control:focus {
            border-color: #dc3545;
            box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.15);
        }
    </style>
@endsection