@extends('layouts.page')
<link rel="stylesheet" href="{{ asset('asset/css/style.css') }}">
@section('title', 'Settings')

<style>
    /* Settings-page-only additions (everything else comes from style.css) */
    .settings-section-title {
        display: flex;
        align-items: center;
        gap: 10px;
        margin-bottom: 18px;
    }
    .settings-section-title i {
        width: 36px;
        height: 36px;
        min-width: 36px;
        border-radius: 10px;
        background: var(--accent-soft, rgba(52, 211, 153, 0.16));
        color: var(--forest-700, #146c43);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 16px;
    }
    .settings-section-title h4 {
        margin: 0;
        font-size: 15.5px;
        font-weight: 700;
        color: var(--ink, #0c2b21);
    }
    .settings-section-title p {
        margin: 0;
        font-size: 12px;
        color: var(--ink-soft, #5c7a6f);
    }

    .settings-card {
        height: 100%;
        display: flex;
        flex-direction: column;
    }

    /* Mail Receiver / User Role tables — no forced scroll, no shrunk width */
    .settings-card .table-card {
        flex: 1 1 auto;
    }
    .settings-card .custom-table {
        width: 100%;
        max-width: none;
        font-size: 13px;
    }
    .settings-card .custom-table th,
    .settings-card .custom-table td {
        padding: 10px 12px;
        vertical-align: middle;
    }

    /* Role select — plain, integrated look instead of a boxed dropdown */
    .role-select {
        border: 1px solid rgba(10, 61, 44, 0.15);
        border-radius: 8px;
        padding: 6px 10px;
        font-size: 12.5px;
        color: var(--ink, #0c2b21);
        background: #fff;
        width: 100%;
    }
    .role-select:focus {
        border-color: var(--forest-500, #22a866);
        box-shadow: 0 0 0 0.15rem var(--accent-soft, rgba(52, 211, 153, 0.16));
        outline: none;
    }

    /* Toggle switch — forest green when checked */
    .form-check-input:checked {
        background-color: var(--forest-600, #1a8754) !important;
        border-color: var(--forest-600, #1a8754) !important;
    }
    .form-check-input:focus {
        box-shadow: 0 0 0 0.15rem var(--accent-soft, rgba(52, 211, 153, 0.16)) !important;
    }

    /* Issue type — card-style radio buttons instead of raw <input type="radio"> */
    .issue-type-options {
        display: flex;
        gap: 10px;
        flex-wrap: wrap;
    }
    .issue-type-card {
        position: relative;
        flex: 1 1 120px;
    }
    .issue-type-card input[type="radio"] {
        position: absolute;
        opacity: 0;
        width: 0;
        height: 0;
    }
    .issue-type-card label {
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 10px 14px;
        border-radius: 10px;
        border: 1px solid rgba(10, 61, 44, 0.14);
        background: #fff;
        color: var(--ink-soft, #5c7a6f);
        font-size: 13px;
        font-weight: 600;
        cursor: pointer;
        margin: 0;
        transition: all 0.2s ease;
    }
    .issue-type-card label i {
        font-size: 15px;
        color: var(--forest-500, #22a866);
    }
    .issue-type-card input[type="radio"]:checked + label {
        border-color: var(--forest-500, #22a866);
        background: var(--accent-soft, rgba(52, 211, 153, 0.16));
        color: var(--forest-800, #0f5236);
    }
    .btn-issue-submit {
        background-color: var(--forest-600, #1a8754) !important;
        border-color: var(--forest-600, #1a8754) !important;
        color: #fff !important;
        font-weight: 600;
        border-radius: 10px;
        transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.15s ease;
    }
    .btn-issue-submit:hover,
    .btn-issue-submit:focus {
        background-color: var(--forest-800, #0f5236) !important;
        border-color: var(--forest-800, #0f5236) !important;
        color: #fff !important;
    }
    .btn-issue-submit:active {
        background-color: var(--forest-900, #0a3d2c) !important;
        border-color: var(--forest-900, #0a3d2c) !important;
        transform: scale(0.98);
    }

    /* Status toggle row (Issue Reminder ON/OFF) */
    .status-toggle-row {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 12px 14px;
        border-radius: 10px;
        background: #f7faf8;
        border: 1px solid rgba(10, 61, 44, 0.06);
    }
    .status-toggle-row label {
        margin: 0;
        font-size: 13px;
        font-weight: 600;
        color: var(--ink, #0c2b21);
    }

    .settings-empty-flex {
        flex: 1 1 auto;
    }

    .table-scroll {
        max-height: 320px;
        overflow-y: auto;
        scrollbar-width: none;       /* Firefox */
        -ms-overflow-style: none;    /* old Edge/IE */
    }
    .table-scroll::-webkit-scrollbar {
        display: none;               /* Chrome/Safari/new Edge */
    }

    .settings-card .custom-table th,
    .settings-card .custom-table td {
        text-align: left;
    }
    .settings-card .custom-table th:last-child,
    .settings-card .custom-table td:last-child {
        text-align: center;
    }
</style>

@section('content')
    @php
        $pageName = 'Settings';
    @endphp
    @include('session-message')

    <!-- Page Banner -->
    <div class="page-banner">
        <div>
            <h2>Manage mail delivery, issue types, reminders, and user roles.</h2>
        </div>
        <div class="page-stat-group">
            <div class="page-stat-pill">
                <i class="bi bi-people"></i>
                <div>
                    <span class="stat-value">{{ $users->count() }}</span>
                    <span class="stat-label">Users</span>
                </div>
            </div>
            <div class="page-stat-pill">
                <i class="bi bi-envelope-check"></i>
                <div>
                    <span class="stat-value">{{ $users->where('mail_receiver', true)->count() }}</span>
                    <span class="stat-label">Mail Receivers</span>
                </div>
            </div>
            <div class="page-stat-pill">
                <i class="bi bi-building"></i>
                <div>
                    <span class="stat-value">{{ $organizations->where('status', true)->count() }}</span>
                    <span class="stat-label">Organizations</span>
                </div>
            </div>
        </div>
    </div>

    <div class="row g-4">
        <!-- Mail Receiver Settings -->
        <div class="col-lg-6">
            <div class="form-section settings-card">
                <div class="settings-section-title">
                    <i class="bi bi-envelope-check"></i>
                    <div>
                        <h4>Mail Receiver Settings</h4>
                        <p>Choose who receives notification emails.</p>
                    </div>
                </div>

                <div class="table-card">
                    <div class="table-scroll">
                        <div class="responsive-table">
                            <table class="custom-table mb-0">
                                <colgroup>
                                    <col style="width: 35%;">
                                    <col style="width: 35%;">
                                    <col style="width: 30%;">
                                </colgroup>
                                <thead>
                                <tr>
                                    <th>Name</th>
                                    <th>Role</th>
                                    <th style="text-align:center;">Mail Receiver</th>
                                </tr>
                                </thead>
                                <tbody>
                                @forelse($users as $user)
                                    <tr>
                                        <td>{{ $user->name ?? 'No Name' }}</td>
                                        <td>{{ $user->roles->pluck('name')->map(fn($name) => $roleNameMap[$name] ?? $name)->join(', ') ?: 'No Role' }}</td>
                                        <td style="text-align:center;">
                                            <form method="POST" action="{{ route('settings.toggle-MailStatus', $user) }}" class="d-inline-flex justify-content-center">
                                                @csrf
                                                @method('PATCH')
                                                <div class="form-check form-switch mb-0">
                                                    <input class="form-check-input" type="checkbox" id="mailToggle-{{ $user->id }}"
                                                           name="mail_receiver" value="1"
                                                           {{ $user->mail_receiver ? 'checked' : '' }}
                                                           onchange="this.form.submit()">
                                                </div>
                                            </form>
                                        </td>
                                    </tr>
                                @empty
                                    <tr>
                                        <td colspan="3">
                                            <div class="d-flex flex-column align-items-center py-4">
                                                <i class="bi bi-people" style="font-size: 32px; color: var(--ink-soft, #5c7a6f);"></i>
                                                <p class="text-secondary mt-2 mb-0">No users found.</p>
                                            </div>
                                        </td>
                                    </tr>
                                @endforelse
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Issue Type Setting -->
        <div class="col-lg-6">
            <div class="form-section settings-card">
                <div class="settings-section-title">
                    <i class="bi bi-tags"></i>
                    <div>
                        <h4>Issue Type Setting</h4>
                        <p>Register a new software or hardware issue type per organization.</p>
                    </div>
                </div>

                <form action="{{ route('settings-submit-issue') }}" method="POST" class="settings-empty-flex">
                    @csrf
                    <div class="mb-3">
                        <label for="organization" class="form-label">Select Organization</label>
                        <select id="organization" class="form-select" name="org_id" required>
                            <option value="" selected disabled>Select Organization</option>
                            @foreach ($organizations as $organization)
                                @if ($organization->status)
                                    <option value="{{ $organization->id }}" {{ old('organization_id') == $organization->id ? 'selected' : '' }}>
                                        {{ $organization->name }}
                                    </option>
                                @endif
                            @endforeach
                        </select>
                        @error('organization_id')
                        <div class="text-danger small mt-1">{{ $message }}</div>
                        @enderror
                    </div>

                    <div class="mb-3">
                        <label class="form-label">*Issue Type</label>
                        <div class="issue-type-options">
                            <div class="issue-type-card">
                                <input type="radio" id="software-option" name="issue_type" value="software" onchange="toggleFields()" required>
                                <label for="software-option"><i class="bi bi-cpu"></i>Software</label>
                            </div>
                            <div class="issue-type-card">
                                <input type="radio" id="hardware-option" name="issue_type" value="hardware" onchange="toggleFields()" required>
                                <label for="hardware-option"><i class="bi bi-hdd-stack"></i>Hardware</label>
                            </div>
                        </div>
                    </div>

                    <!-- Software name (Initially Hidden) -->
                    <div class="mb-3" id="software-field-container" style="display: none;">
                        <label for="software-name" class="form-label">*Software Name</label>
                        <input type="text" class="form-control" id="software-name" name="software" required placeholder="Enter Software Name">
                    </div>

                    <!-- Hardware name (Initially Hidden) -->
                    <div class="mb-3" id="hardware-field-container" style="display: none;">
                        <label for="hardware-name" class="form-label">*Device Name</label>
                        <input type="text" class="form-control" id="hardware-name" name="hardware" required placeholder="Enter Device Name">
                    </div>

                    <div class="pt-4 text-center">
                        <button type="submit" class="btn btn-issue-submit">
                            <i class="bi bi-plus-circle me-1"></i>Add Issue Type
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <div class="row g-4 mt-1">
        <!-- Issue Reminder Mail Setting -->
        <div class="col-lg-6">
            <div class="form-section settings-card">
                <div class="settings-section-title">
                    <i class="bi bi-bell"></i>
                    <div>
                        <h4>Issue Reminder Mail Setting</h4>
                        <p>Control how often reminder emails go out.</p>
                    </div>
                </div>

                <form action="{{ route('time.update') }}" method="POST" class="mb-4">
                    @csrf
                    <div class="mb-3">
                        <label for="time_value" class="form-label">Set Time (Minutes)</label>
                        <div class="input-group" style="max-width: 220px;">
                            <input type="number" class="form-control" name="time_value" id="time_value"
                                   value="{{ old('time_value', $time->time_value) }}" min="0" step="1">
                            <button type="submit" class="btn btn-outline-primary">
                                <i class="bi bi-check-lg"></i>
                            </button>
                        </div>
                    </div>
                </form>

                <form action="{{ route('time.update') }}" method="POST">
                    @csrf
                    <input type="hidden" name="status" value="0">
                    <div class="status-toggle-row">
                        <label for="statusToggle">Reminder Emails</label>
                        <div class="form-check form-switch mb-0">
                            <input class="form-check-input" type="checkbox" id="statusToggle" name="status" value="1"
                                   {{ $time->status ? 'checked' : '' }} onchange="this.form.submit()">
                        </div>
                    </div>
                </form>
            </div>
        </div>

        <!-- User Role Settings -->
        <div class="col-lg-6">
            <div class="form-section settings-card">
                <div class="settings-section-title">
                    <i class="bi bi-person-badge"></i>
                    <div>
                        <h4>User Role Settings</h4>
                        <p>Update a user's role directly from this list.</p>
                    </div>
                </div>

                <div class="table-card">
                    <div class="table-scroll">
                        <div class="responsive-table">
                            <table class="custom-table mb-0">
                                <colgroup>
                                    <col style="width: 45%;">
                                    <col style="width: 55%;">
                                </colgroup>
                                <thead>
                                <tr>
                                    <th>Name</th>
                                    <th>Role</th>
                                </tr>
                                </thead>
                                <tbody>
                                @forelse($users as $user)
                                    <tr>
                                        <td>{{ $user->name ?? 'No Name' }}</td>
                                        <td>
                                            <form action="{{ route('update.user.role') }}" method="POST" class="mb-0">
                                                @csrf
                                                <input type="hidden" name="user_id" value="{{ $user->id }}">
                                                <select name="role_id" class="role-select" onchange="this.form.submit()">
                                                    <option value="">
                                                        {{ $user->roles->pluck('name')->map(fn($name) => $roleNameMap[$name] ?? $name)->join(', ') ?: 'No Role' }}
                                                    </option>
                                                    @foreach($roles as $role)
                                                        <option value="{{ $role->id }}">{{ $roleNameMap[$role->name] ?? $role->name }}</option>
                                                    @endforeach
                                                </select>
                                            </form>
                                        </td>
                                    </tr>
                                @empty
                                    <tr>
                                        <td colspan="2">
                                            <div class="d-flex flex-column align-items-center py-4">
                                                <i class="bi bi-people" style="font-size: 32px; color: var(--ink-soft, #5c7a6f);"></i>
                                                <p class="text-secondary mt-2 mb-0">No users found.</p>
                                            </div>
                                        </td>
                                    </tr>
                                @endforelse
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script>
        function toggleFields() {
            var softwareOption = document.getElementById("software-option").checked;
            var hardwareOption = document.getElementById("hardware-option").checked;

            var softwareField = document.getElementById("software-field-container");
            var hardwareField = document.getElementById("hardware-field-container");

            var softwareInput = document.getElementById("software-name");
            var hardwareInput = document.getElementById("hardware-name");

            softwareField.style.display = "none";
            hardwareField.style.display = "none";

            softwareInput.removeAttribute("required");
            hardwareInput.removeAttribute("required");

            if (softwareOption) {
                softwareField.style.display = "block";
                softwareInput.setAttribute("required", "required");
            } else if (hardwareOption) {
                hardwareField.style.display = "block";
                hardwareInput.setAttribute("required", "required");
            }
        }
    </script>
@endsection