@extends('public::form.header')
<style>
    #form-error-msg {
    color: #fff;
    background-color: #dc3545;
    padding: 10px;
    margin-bottom: 15px;
    border-radius: 5px;
}
    :root {
        --primary-color: #2c3da3;
        --primary-dark: #1e2878;
        --primary-light: #4c5dc3;
        --accent-color: #288cff;
        --text-dark: #333;
        --text-light: #f7f7f7;
        --border-color: #dee2e6;
        --bg-light: #f8f9fa;
        --shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    }

    body {
        font-family: 'Roboto', 'Segoe UI', sans-serif;
        background-color: #f5f7fa;
        color: var(--text-dark);
    }

    /* Header Styling */
    .jumbotron.bmh-blue-bg {
        background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
        padding: 2rem 0;
        margin-top: 0;
        border-radius: 0 0 10px 10px;
        box-shadow: var(--shadow);
    }

    .jumbotron.bmh-blue-wt {
        background-color: white;
        padding: 1rem 0;
        margin-bottom: 0;
    }

    /* Language Selector */
    .nps {
        display: flex;
        justify-content: center;
        margin-bottom: 30px;
    }

    .nps label {
        transition: all 0.3s ease;
        border-radius: 4px;
        margin: 0 5px;
        border: 1px solid var(--border-color);
        color: var(--text-dark);
        font-weight: 500;
        text-shadow: none;
        max-width: 150px;
    }

    .nps label:hover {
        background-color: var(--bg-light);
        transform: translateY(-2px);
    }

    .nps label span {
        text-align: center;
        font-size: 16px;
        padding: 10px 15px;
        display: block;
    }

    .nps label input {
        position: absolute;
        left: -9999px;
    }

    .nps input:checked+span {
        background-color: var(--accent-color);
        color: var(--text-light);
        text-shadow: none;
        box-shadow: 0 2px 8px rgba(40, 140, 255, 0.4);
    }

    /* Form Card */
    .card {
        border: none;
        border-radius: 12px;
        box-shadow: var(--shadow);
        margin-bottom: 40px;
        overflow: hidden;
    }

    .card-header {
        background: linear-gradient(to right, var(--primary-color), var(--primary-light));
        color: white;
        border-radius: 12px 12px 0 0 !important;
        padding: 20px;
        font-weight: bold;
        border: none;
    }

    .card-body {
        padding: 30px;
        background-color: white;
    }

    /* Form Elements */
    .form-label.heading {
        color: var(--primary-color);
        font-size: 1.2rem;
        border-bottom: 2px solid var(--primary-color);
        padding-bottom: 8px;
        display: inline-block;
    }

    .bmh-blue-txt {
        color: var(--text-dark);
    }

    .form-control {
        padding: 12px;
        border-radius: 8px;
        border: 1px solid var(--border-color);
        transition: all 0.3s ease;
        background-color: #fff;
        font-size: 15px;
    }

    .form-control:focus {
        border-color: var(--accent-color);
        box-shadow: 0 0 0 0.2rem rgba(40, 140, 255, 0.25);
    }

    select.form-control {
        height: 48px;
        -webkit-appearance: none;
        appearance: none;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%232c3da3' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-position: right 12px center;
        background-size: 16px;
        padding-right: 40px;
    }

    textarea.form-control {
        min-height: 120px;
    }

    .custom-file-input::-webkit-file-upload-button {
        visibility: hidden;
    }

    .form-text {
        color: #6c757d;
        font-size: 13px;
        margin-top: 5px;
    }

    /* Submit Button */
    .btn-submit {
        background: linear-gradient(to right, var(--primary-color), var(--primary-light));
        color: white;
        border-radius: 8px;
        padding: 12px 30px;
        border: none;
        font-weight: bold;
        transition: all 0.3s ease;
        font-size: 16px;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        box-shadow: 0 4px 8px rgba(44, 61, 163, 0.3);
    }

    .btn-submit:hover {
        background: linear-gradient(to right, var(--primary-dark), var(--primary-color));
        transform: translateY(-3px);
        box-shadow: 0 6px 12px rgba(44, 61, 163, 0.4);
    }

    .btn-submit:active {
        transform: translateY(1px);
    }

    /* Required Field */
    .required {
        color: #dc3545;
        margin-left: 3px;
    }

    /* Checkbox Style */
    .custom-checkbox .custom-control-label::before {
        border-radius: 4px;
        border: 2px solid var(--primary-color);
    }

    .custom-checkbox .custom-control-input:checked~.custom-control-label::before {
        background-color: var(--primary-color);
        border-color: var(--primary-color);
    }

    .custom-control-label {
        line-height: 1.6;
        padding-left: 10px;
    }

    /* Section Dividers */
    .section-divider {
        position: relative;
        margin: 30px 0;
        height: 1px;
        background: var(--border-color);
    }

    /* Alert styling */
    .alert {
        border-radius: 8px;
        padding: 12px 15px;
    }

    /* Department card styling */
    .department-card {
        background-color: white;
        height: 130px;
        width: 180px;
        text-align: center;
        display: inline-block;
        margin: 0 10px 15px 10px;
        border-radius: 10px;
        border: 1px solid var(--border-color);
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
        transition: all 0.3s ease;
        cursor: pointer;
    }

    .department-card:hover {
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
        transform: translateY(-3px);
    }

    .department-image {
        margin-top: 22px;
        width: 73px;
        height: 73px;
        border: 1px solid #ddd;
        border-radius: 50%;
        transition: transform 0.3s ease;
        object-fit: cover;
    }
    

    .department-card.selected {
        border: 2px solid var(--primary-color);
        box-shadow: 0 4px 12px rgba(44, 61, 163, 0.2);
    }

    .department-name {
        margin-top: 10px;
        font-size: 14px;
        font-weight: 600;
        color: var(--text-dark);
    }

    /* Responsive adjustments */
    @media (max-width: 991px) {
        .card-body {
            padding: 20px;
        }
        
        .jumbotron h3.display-5 {
            font-size: 1.8rem;
        }
    }

    @media (max-width: 767px) {
        .form-group {
            margin-bottom: 20px;
        }
        
        .card-body {
            padding: 15px;
        }
        
        .btn-submit {
            width: 100%;
            padding: 12px;
        }
        
        .nps label {
            width: 47%;
        }
        
        .department-card {
            width: 45%;
            margin: 0 5px 15px 5px;
        }
    }

    @media (min-width: 576px) {
        .f-logo {
            width: 200px !important;
            max-height: 70px;
            object-fit: contain;
        }
    }

    /* Mobile improvements */
    @media (max-width: 576px) {
        .jumbotron {
            padding: 1rem 0;
        }
        
        .jumbotron h3.display-5 {
            font-size: 1.5rem;
        }
        
        .form-label.heading {
            font-size: 1.1rem;
        }
        
        .card-header {
            padding: 15px;
        }
        
        .container {
            padding-left: 10px;
            padding-right: 10px;
        }
    }

    /* Animation for form submission */
    @keyframes submitPulse {
        0% {
            box-shadow: 0 0 0 0 rgba(44, 61, 163, 0.7);
        }
        70% {
            box-shadow: 0 0 0 10px rgba(44, 61, 163, 0);
        }
        100% {
            box-shadow: 0 0 0 0 rgba(44, 61, 163, 0);
        }
    }

    .form-control.is-invalid {
        border-color: #dc3545;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23dc3545' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-position: right calc(0.375em + 0.1875rem) center;
        background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
    }

    .input-with-icon {
        position: relative;
    }

    .input-with-icon i {
        position: absolute;
        right: 15px;
        top: 50%;
        transform: translateY(-50%);
        color: var(--primary-color);
    }
</style>
@section('content')

<body>
    <div class="jumbotron jumbotron-fluid bmh-blue-wt">
        <div class="container text-center">
            <a class="logo">
                <span class="logo-lg"> {!! $passRequest->company->logo
                    ? $passRequest->company->fileShow('logo')->size('logo')->view('admin::general.logo')
                    : trans('cms.name.html') !!}</span>
            </a>
        </div>
    </div>
    <div class="card-header">
        <div class="container text-center">
            <h3 class="display-5 text-white">Visitor Management System</h3>
        </div>
    </div>
    
    @php
        $division_id = app('request')->input('division_id');
    @endphp
    
    <div class="container mt-4">
        <div class="row justify-content-center">
            <div class="col-lg-10">
 
                
                <div class="card">
                    <div class="card-header">
                        <h5 class="mb-0" id="form-title">Visitor Details</h5>
                    </div>
                
                    <div class="card-body">
                        <div class="row">
                            <!-- Visitor Info in Table -->
                            <div class="col-md-6">
                                <table class="table table-bordered">
                                    <tbody>
                                        <tr>
                                            <th>Name</th>
                                            <td>{{ $visitorNames }}</td>
                                        </tr>
                                        <tr>
                                            <th>Visit date</th>
                                            <td>{{ format_date($passRequest->visit_date) }}</td>
                                        </tr>
                                        <tr>
                                            <td><strong>Department:</strong></td>
                                            <td>{{ $passRequest->visitingDepartment->name }}</td>
                                        </tr>
                                        <tr>
                                            <td><strong>Host Name:</strong></td>
                                            <td>{{ $passRequest->employee->name }}</td>
                                        </tr>  
                                    </tbody>
                                </table>
                            </div>
                
                            <!-- QR Code -->
                            <div class="col-md-6 text-center">
                                <h5 class="text-secondary mb-3">QR Code</h5>
                                <div class="mt-3">
                                    {!! QrCode::size(200)->generate($passRequest->id) !!}
                                </div>
                                <h5 class="text-secondary mb-3">PR - {{  $passRequest->id}}</h5>
                                <h5 class="text-secondary mb-3">Please show this QR code to the security</h5>
                            </div>

                            <div class="footer">
                                <div class="footer-bar"></div>
                                <div class="text-center text-muted">
                                    <small>
                                        &copy; 2025 
                                        <a href="https://assetsadm.com/">Assetsadm</a> | 
                                        <a href="https://assetsadm.com/terms-of-use">Terms of use</a> |
                                        <a href="https://assetsadm.com/privacy-policy">Privacy Policy</a></small>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                
            </div>
        </div>
    </div>

    <script type="text/javascript">
    </script>
</body>

@stop