@extends('dashboard.layouts.app')

@section('content')
    <style>
        .ui-card {
            border: 0;
            border-radius: 18px;
            background: #fff;
            box-shadow: 0 10px 30px rgba(15, 23, 42, 0.06);
            padding: 1.25rem;
        }

        .form-section__head {
            margin-bottom: 1rem;
            padding-bottom: 0.9rem;
            border-bottom: 1px solid #eef2f7;
        }

        .form-section__title {
            font-size: 1rem;
            font-weight: 700;
            color: #111827;
        }

        .form-section__sub {
            color: #6b7280;
            font-size: 0.92rem;
        }

        .details-grid {
            display: grid;
            grid-template-columns: repeat(12, minmax(0, 1fr));
            gap: 1rem;
        }

        .details-col-12 {
            grid-column: span 12 / span 12;
        }

        .details-col-6 {
            grid-column: span 6 / span 6;
        }

        .details-item {
            padding: 1rem;
            border: 1px solid #edf2f7;
            border-radius: 16px;
            background: #fcfcfd;
            min-height: 100%;
        }

        .details-item__label {
            font-size: 0.82rem;
            font-weight: 700;
            letter-spacing: 0.02em;
            color: #64748b;
            margin-bottom: 0.45rem;
            text-transform: uppercase;
        }

        .details-item__value {
            color: #111827;
            font-weight: 600;
            line-height: 1.7;
            word-break: break-word;
        }

        .details-item__value--muted {
            color: #6b7280;
            font-weight: 500;
        }

        .regularization-table-wrap .table {
            margin-bottom: 0;
            border-color: #e5e7eb;
        }

        .regularization-table-wrap .table thead th {
            background: #f8fafc;
            color: #334155;
            font-weight: 700;
            border-color: #e5e7eb;
            vertical-align: middle;
            text-align: center;
        }

        .regularization-table-wrap .table tbody td {
            border-color: #e5e7eb;
            vertical-align: middle;
        }

        .asset-input,
        .asset-select {
            width: 100%;
            min-height: 44px;
            border: 1px solid #dbe2ea;
            border-radius: 12px;
            padding: 0.7rem 0.9rem;
            background: #fff;
            color: #111827;
        }

        .asset-readonly {
            width: 100%;
            min-height: 44px;
            border: 1px solid #e5e7eb;
            border-radius: 12px;
            padding: 0.7rem 0.9rem;
            background: #f8fafc;
            color: #111827;
            display: flex;
            align-items: center;
        }

        @media (max-width: 991.98px) {
            .details-col-6,
            .details-col-12 {
                grid-column: span 12 / span 12;
            }
        }
    </style>

    <div class="container-fluid app-bg">
        <div class="page-shell">
            <div class="space-y-4">

                <x-page-title
                    title="Regularization / Permission Details"
                    description="Review employee request details, timing information, and related regularization dates when applicable.">
                    <a href="{{ route('regularizations_permissions.index') }}" class="asset-btn asset-btn--secondary">
                        Back
                    </a>
                </x-page-title>

                <div class="ui-card">
                    <div class="form-section">
                        <div class="form-section__head">
                            <h5 class="form-section__title mb-1">Request Information</h5>
                            <p class="form-section__sub mb-0">
                                Main employee request details including type, timing, reason, and permission information.
                            </p>
                        </div>

                        <div class="details-grid">
                            <div class="details-col-6">
                                <div class="details-item">
                                    <div class="details-item__label">Employee Name</div>
                                    <div class="details-item__value">{{ $record->staff->full_name ?? 'N/A' }}</div>
                                </div>
                            </div>

                            <div class="details-col-6">
                                <div class="details-item">
                                    <div class="details-item__label">Type</div>
                                    <div class="details-item__value">{{ ucfirst($record->type ?? 'N/A') }}</div>
                                </div>
                            </div>

                            <div class="details-col-6">
                                <div class="details-item">
                                    <div class="details-item__label">Date</div>
                                    <div class="details-item__value">{{ $record->date ?: '—' }}</div>
                                </div>
                            </div>

                            <div class="details-col-6">
                                <div class="details-item">
                                    <div class="details-item__label">From Time</div>
                                    <div class="details-item__value">
                                        {{ $record->from_time ? \Carbon\Carbon::parse($record->from_time)->format('H:i') : '—' }}
                                    </div>
                                </div>
                            </div>

                            <div class="details-col-6">
                                <div class="details-item">
                                    <div class="details-item__label">End Time</div>
                                    <div class="details-item__value">
                                        {{ $record->end_time ? \Carbon\Carbon::parse($record->end_time)->format('H:i') : '—' }}
                                    </div>
                                </div>
                            </div>

                            <div class="details-col-6">
                                <div class="details-item">
                                    <div class="details-item__label">Permission</div>
                                    <div class="details-item__value {{ $record->permission ? '' : 'details-item__value--muted' }}">
                                        {{ $record->permission ?? '—' }}
                                    </div>
                                </div>
                            </div>

                            <div class="details-col-12">
                                <div class="details-item">
                                    <div class="details-item__label">Reason</div>
                                    <div class="details-item__value {{ $record->reason ? '' : 'details-item__value--muted' }}">
                                        {{ $record->reason ?? '—' }}
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                @if($record->type == 'regularizations')
                    <div class="ui-card">
                        <div class="form-section">
                            <div class="form-section__head">
                                <h5 class="form-section__title mb-1">Regularization Days</h5>
                                <p class="form-section__sub mb-0">
                                    Review the check-in, check-out, and reason entries for each regularized working day.
                                </p>
                            </div>

                            <div class="regularization-table-wrap">
                                <div class="table-responsive">
                                    <table class="table align-middle">
                                        <thead>
                                            <tr>
                                                <th>Date</th>
                                                <th>Check In</th>
                                                <th>Check Out</th>
                                                <th>Reason</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            @forelse ($record->HrRegularizationsDates as $date)
                                                <tr>
                                                    <td>
                                                        <div class="asset-readonly">
                                                            {{ $date->date }}
                                                        </div>
                                                    </td>
                                                    <td>
                                                        <div class="asset-readonly">
                                                            {{ $date->check_in ?: '—' }}
                                                        </div>
                                                    </td>
                                                    <td>
                                                        <div class="asset-readonly">
                                                            {{ $date->check_out ?: '—' }}
                                                        </div>
                                                    </td>
                                                    <td>
                                                        <div class="asset-readonly">
                                                            {{ $date->reason ?: '—' }}
                                                        </div>
                                                    </td>
                                                </tr>
                                            @empty
                                                <tr>
                                                    <td colspan="4" class="text-center text-muted py-4">
                                                        No regularization dates found.
                                                    </td>
                                                </tr>
                                            @endforelse
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                @endif

            </div>
        </div>
    </div>
@endsection