@extends('admin.layout.app')
@section('title', __('Application Details'))

@section('body')
<section class="section pt-4">
    <div class="container-fluid">


        @if(session('success'))
            <div class="alert alert-success alert-dismissible fade show" role="alert">
                {{ session('success') }}
                <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
            </div>
        @endif
        @if(session('warning'))
            <div class="alert alert-warning alert-dismissible fade show" role="alert">
                {{ session('warning') }}
                @if(session('mail_error'))
                    <div class="small mt-1 text-muted">{{ session('mail_error') }}</div>
                @endif
                <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
            </div>
        @endif

        <!-- Header Section -->
        <div class="row mb-4">
            <div class="col-12">
                <div class="d-flex justify-content-between align-items-center mb-3">
                    <div>
                        <h4 class="fw-bold mb-0 text-dark">
                            <i class="fas fa-file-alt me-2 text-primary"></i>
                            {{ __('Application Details') }}
                        </h4>
                        <p class="text-muted mb-0">
                            <i class="fas fa-hashtag me-1"></i>
                            {{ __('front.id') }} <span class="badge bg-light text-dark border">#{{ $application->id }}</span>
                            @if($application->register_no)
                            | <i class="fas fa-barcode me-1"></i>
                            {{ __('Reg. No.') }}: <span class="badge bg-info">{{ $application->register_no }}</span>
                            @endif
                        </p>
                    </div>
                    <div class="d-flex flex-wrap gap-2">
                        <a href="{{ route('applications.index') }}" class="btn btn-outline-secondary btn-sm rounded-pill">
                            <i class="fas fa-arrow-left me-1"></i> {{ __('Back') }}
                        </a>
                        @if($application->status)
                        <span class="badge bg-{{ $application->status == 'approved' ? 'success' : ($application->status == 'pending' ? 'warning' : 'danger') }} align-self-center px-3 py-2 rounded-pill">
                            <i class="fas fa-circle me-1 small"></i>
                            {{ ucfirst($application->status) }}
                        </span>
                        @endif
                    </div>
                </div>
            </div>
        </div>

        <!-- Main Card -->
        <div class="card border-0 shadow-lg rounded-4 overflow-hidden mb-4">
            <div class="card-header bg-gradient-primary text-white py-3">
                <div class="d-flex flex-column flex-lg-row justify-content-between align-items-start align-items-lg-center gap-3">
                    <h5 class="mb-0 fw-semibold">
                        <i class="fas fa-user-circle me-2"></i>
                        {{ __('Applicant Information') }}
                    </h5>
                    <div class="small">
                        <i class="fas fa-calendar-alt me-1"></i>
                        {{ __('Date') }}: {{ $application->created_at->format('Y-m-d h:i A') }}
                    </div>
                </div>
            </div>

            <div class="card-body p-4">
                @if($application->student_photo)
                <div class="row mb-4">
                    <div class="col-12 text-center">
                        <img src="{{ asset('storage/'.$application->student_photo) }}" alt="Student Photo" class="rounded-circle shadow" style="width:120px;height:120px;object-fit:cover;border:5px solid #fff;">
                        <div class="small text-muted mt-2">Student Photo</div>
                    </div>
                </div>
                @endif

                <div class="row g-4">
                    <!-- Personal Information -->
                    <div class="col-lg-6">
                        <div class="card h-100 border-0 shadow-sm">
                            <div class="card-header bg-light bg-opacity-50 border-0 pt-3 px-3">
                                <h6 class="mb-0 fw-semibold">
                                    <i class="fas fa-id-card me-2 text-primary"></i>
                                    {{ __('Personal Information') }}
                                </h6>
                            </div>
                            <div class="card-body pt-2">
                                <div class="row g-3">
                                    <div class="col-md-6">
                                        <div class="d-flex align-items-center mb-3">
                                            <div class="icon-circle bg-primary bg-opacity-10 text-primary me-3">
                                                <i class="fas fa-user"></i>
                                            </div>
                                            <div>
                                                <small class="text-muted text-uppercase small fw-semibold">{{ __('Name') }}</small>
                                                <strong class="d-block">{{ $application->name ?? '—' }}</strong>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="col-md-6">
                                        <div class="d-flex align-items-center mb-3">
                                            <div class="icon-circle bg-info bg-opacity-10 text-info me-3">
                                                <i class="fas fa-user-tie"></i>
                                            </div>
                                            <div>
                                                <small class="text-muted text-uppercase small fw-semibold">{{ __('Father\'s Name') }}</small>
                                                <strong class="d-block">{{ $application->father_name ?? '—' }}</strong>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="col-md-6">
                                        <div class="d-flex align-items-center mb-3">
                                            <div class="icon-circle bg-warning bg-opacity-10 text-warning me-3">
                                                <i class="fas fa-cake-candles"></i>
                                            </div>
                                            <div>
                                                <small class="text-muted text-uppercase small fw-semibold">{{ __('Date of Birth') }}</small>
                                                <strong class="d-block">{{ $application->dob ? $application->dob->format('Y-m-d') : '—' }}</strong>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="col-md-6">
                                        <div class="d-flex align-items-center mb-3">
                                            <div class="icon-circle bg-success bg-opacity-10 text-success me-3">
                                                <i class="fas fa-venus-mars"></i>
                                            </div>
                                            <div>
                                                <small class="text-muted text-uppercase small fw-semibold">{{ __('Gender') }}</small>
                                                <strong class="d-block">{{ $application->gender ?? '—' }}</strong>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Contact Information -->
                    <div class="col-lg-6">
                        <div class="card h-100 border-0 shadow-sm">
                            <div class="card-header bg-light bg-opacity-50 border-0 pt-3 px-3">
                                <h6 class="mb-0 fw-semibold">
                                    <i class="fas fa-address-book me-2 text-success"></i>
                                    {{ __('Contact Information') }}
                                </h6>
                            </div>
                            <div class="card-body pt-2">
                                <div class="row g-3">
                                    <div class="col-md-6">
                                        <div class="d-flex align-items-center mb-3">
                                            <div class="icon-circle bg-danger bg-opacity-10 text-danger me-3">
                                                <i class="fas fa-envelope"></i>
                                            </div>
                                            <div>
                                                <small class="text-muted text-uppercase small fw-semibold">{{ __('Email') }}</small>
                                                <strong class="d-block">
                                                    @if($application->email)
                                                    <a href="mailto:{{ $application->email }}" class="text-decoration-none text-dark">
                                                        {{ $application->email }}
                                                    </a>
                                                    @else
                                                    —
                                                    @endif
                                                </strong>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="col-md-6">
                                        <div class="d-flex align-items-center mb-3">
                                            <div class="icon-circle bg-primary bg-opacity-10 text-primary me-3">
                                                <i class="fas fa-phone-alt"></i>
                                            </div>
                                            <div>
                                                <small class="text-muted text-uppercase small fw-semibold">{{ __('Phone') }}</small>
                                                <strong class="d-block">
                                                    @if($application->phone)
                                                    <a href="tel:{{ $application->phone }}" class="text-decoration-none text-dark">
                                                        {{ $application->phone }}
                                                    </a>
                                                    @else
                                                    —
                                                    @endif
                                                </strong>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="col-12">
                                        <div class="d-flex align-items-center mb-3">
                                            <div class="icon-circle bg-info bg-opacity-10 text-info me-3">
                                                <i class="fas fa-globe"></i>
                                            </div>
                                            <div>
                                                <small class="text-muted text-uppercase small fw-semibold">{{ __('Country') }}</small>
                                                <strong class="d-block">{{ $application->country ?? '—' }}</strong>
                                            </div>
                                        </div>
                                    </div>

                                    @if($application->address)
                                    <div class="col-12">
                                        <div class="d-flex">
                                            <div class="icon-circle bg-warning bg-opacity-10 text-warning me-3">
                                                <i class="fas fa-map-pin"></i>
                                            </div>
                                            <div class="flex-grow-1">
                                                <small class="text-muted text-uppercase small fw-semibold">{{ __('Address') }}</small>
                                                <div class="bg-light bg-opacity-50 p-3 rounded-3 mt-1">
                                                    {{ $application->address }}
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    @endif
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Education & Job Information -->
                    <div class="col-lg-6">
                        <div class="card h-100 border-0 shadow-sm">
                            <div class="card-header bg-light bg-opacity-50 border-0 pt-3 px-3">
                                <h6 class="mb-0 fw-semibold">
                                    <i class="fas fa-graduation-cap me-2 text-info"></i>
                                    {{ __('Education & Job') }}
                                </h6>
                            </div>
                            <div class="card-body pt-2">
                                <div class="mb-3">
                                    <div class="d-flex align-items-center mb-2">
                                        <div class="icon-circle bg-info bg-opacity-10 text-info me-3">
                                            <i class="fas fa-university"></i>
                                        </div>
                                        <div>
                                            <small class="text-muted text-uppercase small fw-semibold">{{ __('Highest Education') }}</small>
                                            <strong class="d-block">{{ $application->last_education ?? $application->education_level ?? '—' }}</strong>
                                        </div>
                                    </div>
                                </div>

                                <div class="mb-3">
                                    <div class="d-flex align-items-center mb-2">
                                        <div class="icon-circle bg-success bg-opacity-10 text-success me-3">
                                            <i class="fas fa-briefcase"></i>
                                        </div>
                                        <div>
                                            <small class="text-muted text-uppercase small fw-semibold">{{ __('Current Job') }}</small>
                                            <strong class="d-block">{{ $application->current_job ?? '—' }}</strong>
                                        </div>
                                    </div>
                                </div>

                                <div class="mb-3">
                                    <div class="d-flex align-items-center mb-2">
                                        <div class="icon-circle bg-primary bg-opacity-10 text-primary me-3">
                                            <i class="fas fa-building-columns"></i>
                                        </div>
                                        <div>
                                            <small class="text-muted text-uppercase small fw-semibold">Academic Selection</small>
                                            <strong class="text-primary d-block">{{ $application->university?->name ?? '—' }}</strong>
                                            <div class="small text-muted">Faculty: {{ $application->faculty?->name ?? '—' }}</div>
                                            <div class="small text-muted">Department: {{ $application->department?->name ?? '—' }}</div>
                                            <div class="small text-muted">Program: {{ $application->program?->name ?? '—' }}</div>
                                            <div class="small text-muted">Course: {{ $application->course?->title ?? $application->desired_course ?? '—' }}</div>
                                        </div>
                                    </div>
                                </div>

                                @if($application->tazkira_no)
                                <div class="mt-3 pt-3 border-top">
                                    <div class="d-flex align-items-center">
                                        <div class="icon-circle bg-warning bg-opacity-10 text-warning me-3">
                                            <i class="fas fa-id-card"></i>
                                        </div>
                                        <div>
                                            <small class="text-muted text-uppercase small fw-semibold">{{ __('ID Card No.') }}</small>
                                            <strong class="d-block">{{ $application->tazkira_no }}</strong>
                                        </div>
                                    </div>
                                </div>
                                @endif
                            </div>
                        </div>
                    </div>

                    <!-- Application Details & Actions -->
                    <div class="col-lg-6">
                        <div class="card h-100 border-0 shadow-sm">
                            <div class="card-header bg-light bg-opacity-50 border-0 pt-3 px-3">
                                <h6 class="mb-0 fw-semibold">
                                    <i class="fas fa-clipboard-list me-2 text-warning"></i>
                                    {{ __('Application Details') }}
                                </h6>
                            </div>
                            <div class="card-body pt-2">
                                @if($application->message)
                                <div class="mb-4">
                                    <div class="d-flex mb-2">
                                        <div class="icon-circle bg-secondary bg-opacity-10 text-secondary me-3">
                                            <i class="fas fa-comment-dots"></i>
                                        </div>
                                        <div class="flex-grow-1">
                                            <small class="text-muted text-uppercase small fw-semibold">{{ __('Message') }}</small>
                                            <div class="bg-light bg-opacity-50 p-3 rounded-3 mt-1">
                                                <p class="mb-0" style="white-space: pre-wrap;">{{ $application->message }}</p>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                @endif

                                <!-- Agreement Status -->
                                <div class="mb-3">
                                    <div class="d-flex align-items-center">
                                        <div class="icon-circle {{ $application->agreement ? 'bg-success bg-opacity-10 text-success' : 'bg-danger bg-opacity-10 text-danger' }} me-3">
                                            <i class="fas fa-{{ $application->agreement ? 'check-circle' : 'times-circle' }}"></i>
                                        </div>
                                        <div>
                                            <small class="text-muted text-uppercase small fw-semibold">{{ __('Agreement') }}</small>
                                            <strong class="d-block">
                                                {{ $application->agreement ? __('Accepted') : __('Not Accepted') }}
                                                @if($application->signature_name)
                                                <br><small class="text-muted">{{ __('Signature') }}: {{ $application->signature_name }}</small>
                                                @endif
                                                @if($application->signed_date)
                                                <br><small class="text-muted">{{ __('Signed Date') }}: {{ $application->signed_date }}</small>
                                                @endif
                                            </strong>
                                        </div>
                                    </div>
                                </div>

                                <!-- Technical Info -->
                                <div class="mt-4 pt-3 border-top">
                                    <div class="row g-2">
                                        <div class="col-md-6">
                                            <div class="d-flex align-items-center">
                                                <i class="fas fa-network-wired text-muted me-2 fa-sm"></i>
                                                <small class="text-muted">{{ __('IP Address') }}: {{ $application->ip ?? '—' }}</small>
                                            </div>
                                        </div>
                                        <div class="col-md-6">
                                            <div class="d-flex align-items-center">
                                                <i class="fas fa-window-maximize text-muted me-2 fa-sm"></i>
                                                <small class="text-muted">{{ __('Browser') }}: {{ Str::limit($application->user_agent ?? '—', 30) }}</small>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Attachments Section -->
                <div class="row mt-4">
                    <div class="col-12">
                        <div class="card border-0 shadow-sm">
                            <div class="card-header bg-light bg-opacity-50 border-0 pt-3 px-3">
                                <h6 class="mb-0 fw-semibold">
                                    <i class="fas fa-paperclip me-2 text-danger"></i>
                                    {{ __('Attachments / Tazkira Copy') }}
                                </h6>
                            </div>
                            <div class="card-body">
                                @include('online-form._attachments', ['model' => $application])
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Action Buttons -->
                <div class="row mt-4">
                    <div class="col-12">
                        <div class="d-flex justify-content-between align-items-center">
                            <div>
                                <span class="text-muted small">
                                    <i class="fas fa-clock me-1"></i>
                                    {{ __('Last Updated') }}: {{ $application->updated_at->diffForHumans() }}
                                </span>
                            </div>
                            <div class="d-flex flex-wrap gap-2">

                                <!-- Print Button -->
                                <button class="btn btn-outline-info btn-sm rounded-pill" onclick="window.print()">
                                    <i class="fas fa-print me-1"></i> {{ __('Print') }}
                                </button>


                                <a class="btn btn-primary btn-sm rounded-pill"
                                   href="{{ route('students.create', [
                                        'from_application' => $application->id,
                                        'name' => $application->name,
                                        'father_name' => $application->father_name,
                                        'dob' => optional($application->dob)->format('Y-m-d'),
                                        'email' => $application->email,
                                        'phone' => $application->phone,
                                        'emergency_phone' => $application->emergency_phone,
                                        'country' => $application->country,
                                        'tazkira_no' => $application->tazkira_no,
                                        'last_education' => $application->last_education,
                                        'current_job' => $application->current_job,
                                        'desired_course' => $application->desired_course,
                                        'university_id' => $application->university_id,
                                        'faculty_id' => $application->faculty_id,
                                        'department_id' => $application->department_id,
                                        'program_id' => $application->program_id,
                                        'course_id' => $application->course_id,
                                        'student_photo' => $application->student_photo,
                                   ]) }}">
                                    <i class="fas fa-user-plus me-1"></i> Create Student
                                </a>

                                <form method="POST" action="{{ route('applications.status', $application->id) }}" class="d-flex gap-2 flex-wrap align-items-center">
                                    @csrf @method('PATCH')
                                    <input type="hidden" name="status" value="approved">
                                    <input type="text" name="status_note" class="form-control form-control-sm rounded-pill" placeholder="Optional email note" style="max-width:220px">
                                    <button class="btn btn-success btn-sm rounded-pill"><i class="fas fa-check me-1"></i> Accept + Email</button>
                                </form>

                                <form method="POST" action="{{ route('applications.status', $application->id) }}" class="d-flex gap-2 flex-wrap align-items-center">
                                    @csrf @method('PATCH')
                                    <input type="hidden" name="status" value="rejected">
                                    <input type="text" name="status_note" class="form-control form-control-sm rounded-pill" placeholder="Rejection reason" style="max-width:220px">
                                    <button class="btn btn-warning btn-sm rounded-pill"><i class="fas fa-times me-1"></i> Reject + Email</button>
                                </form>

                                <!-- Delete Button -->
                                <form method="POST" action="{{ route('applications.destroy', $application->id) }}"
                                      onsubmit="return confirm('{{ __('Are you sure you want to delete this application? This action cannot be undone.') }}')">
                                    @csrf @method('DELETE')
                                    <button class="btn btn-outline-danger btn-sm rounded-pill">
                                        <i class="fas fa-trash-alt me-1"></i> {{ __('Delete') }}
                                    </button>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

    </div>
</section>

<!-- Custom CSS -->
<style>
    .icon-circle {
        width: 42px;
        height: 42px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        transition: all 0.2s ease;
    }
    .icon-circle:hover {
        transform: scale(1.05);
    }
    .bg-gradient-primary {
        background: linear-gradient(145deg, #0d6efd 0%, #0a58ca 100%);
    }
    .card {
        transition: all 0.2s ease;
    }
    .card:hover {
        box-shadow: 0 0.5rem 1rem rgba(0,0,0,0.08) !important;
    }
    .badge {
        font-weight: 500;
    }
    .border-0 {
        border: 0 !important;
    }
    @media print {
        .btn, .no-print {
            display: none !important;
        }
        .card {
            border: 1px solid #dee2e6 !important;
            box-shadow: none !important;
        }
        .card-header {
            background: #f8f9fa !important;
            color: #000 !important;
            -webkit-print-color-adjust: exact;
            print-color-adjust: exact;
        }
        .bg-gradient-primary {
            background: #f8f9fa !important;
            color: #000 !important;
        }
    }
</style>

<!-- JavaScript -->
<script>
    document.addEventListener('DOMContentLoaded', function() {
        // Initialize Bootstrap tooltips
        var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'));
        tooltipTriggerList.map(function (tooltipTriggerEl) {
            return new bootstrap.Tooltip(tooltipTriggerEl);
        });
    });
</script>
@endsection