@extends('layouts.mobile_master')
@section('page_css')
  <style>
        :root {
            --primary: #4361ee;
            --primary-light: #6a7ce0;
            --secondary: #3f37c9;
            --success: #4cc9f0;
            --light: #f8f9fa;
            --dark: #212529;
            --gray: #6c757d;
            --light-gray: #e9ecef;
            --card-shadow: 0 4px 20px rgba(0,0,0,0.08);
            --transition: all 0.3s ease;
        }
        
        body {
            background-color: #f8fafc;
            font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
            padding-bottom: 30px;
            color: #495057;
        }
        
        .header {
            background: linear-gradient(135deg, var(--primary), var(--secondary));
            color: white;
            padding: 22px 20px;
            border-radius: 0 0 24px 24px;
            box-shadow: 0 6px 18px rgba(67, 97, 238, 0.18);
            margin-bottom: 28px;
        }
        
        .section-title {
            font-weight: 600;
            margin-bottom: 22px;
            color: var(--dark);
            display: flex;
            align-items: center;
            font-size: 1.25rem;
            padding-bottom: 10px;
            border-bottom: 2px solid var(--light-gray);
        }
        
        .section-title i {
            margin-right: 12px;
            color: var(--primary);
            background: rgba(67, 97, 238, 0.1);
            width: 38px;
            height: 38px;
            border-radius: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        
        .info-card {
            background: white;
            border-radius: 18px;
            box-shadow: var(--card-shadow);
            padding: 24px;
            margin-bottom: 24px;
            border: none;
            transition: var(--transition);
        }
        
        .info-card:hover {
            box-shadow: 0 8px 24px rgba(0,0,0,0.12);
        }
        
        .patient-avatar {
            width: 70px;
            height: 70px;
            border-radius: 50%;
            background: linear-gradient(135deg, var(--success), var(--primary));
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-weight: bold;
            font-size: 28px;
            margin-right: 18px;
            box-shadow: 0 4px 10px rgba(76, 201, 240, 0.3);
        }
        
        .patient-header {
            display: flex;
            align-items: center;
            margin-bottom: 24px;
        }
        
        .patient-header h4 {
            margin-bottom: 5px;
            color: var(--dark);
        }
        
        .patient-header p {
            color: var(--gray);
            margin-bottom: 0;
        }
        
        .info-row {
            display: flex;
            margin-bottom: 14px;
            padding-bottom: 14px;
            border-bottom: 1px solid var(--light-gray);
        }
        
        .info-row:last-child {
            border-bottom: none;
            margin-bottom: 0;
            padding-bottom: 0;
        }
        
        .info-label {
            width: 120px;
            font-weight: 600;
            opacity: 0.8;
            color: var(--gray);
        }
        
        .info-value {
            flex: 1;
            color: var(--dark);
        }
        
        .form-card {
            background: white;
            border-radius: 18px;
            box-shadow: var(--card-shadow);
            padding: 28px;
            margin-bottom: 28px;
            border: none;
            transition: var(--transition);
        }
        
        .form-card:hover {
            box-shadow: 0 8px 24px rgba(0,0,0,0.12);
        }
        
        .form-label {
            font-weight: 600;
            color: var(--dark);
            margin-bottom: 10px;
            font-size: 0.95rem;
        }
        
        .form-control, .form-select {
            border-radius: 12px;
            padding: 14px 18px;
            border: 1px solid #e0e0e0;
            transition: var(--transition);
            font-size: 0.95rem;
        }
        
        .form-control:focus, .form-select:focus {
            border-color: var(--primary);
            box-shadow: 0 0 0 0.25rem rgba(67, 97, 238, 0.15);
        }
        
        textarea.form-control {
            min-height: 130px;
        }
        
        .btn-primary {
            background: linear-gradient(135deg, var(--primary), var(--secondary));
            border: none;
            border-radius: 14px;
            padding: 16px 24px;
            font-weight: 600;
            width: 100%;
            font-size: 1.05rem;
            box-shadow: 0 4px 14px rgba(67, 97, 238, 0.25);
            transition: var(--transition);
        }
        
        .btn-primary:hover {
            background: linear-gradient(135deg, var(--secondary), var(--primary));
            transform: translateY(-3px);
            box-shadow: 0 8px 20px rgba(67, 97, 238, 0.3);
        }
        
        .btn-primary:active {
            transform: translateY(0);
        }
        
        .content-container {
            padding: 0 18px;
            max-width: 800px;
            margin: 0 auto;
        }
        
        /* Case History Styles */
        .case-category {
            background: rgba(67, 97, 238, 0.04);
            border-radius: 14px;
            padding: 18px;
            margin-bottom: 18px;
            border: 1px solid rgba(67, 97, 238, 0.1);
            transition: var(--transition);
        }
        
        .case-category:hover {
            background: rgba(67, 97, 238, 0.06);
        }
        
        .category-header {
            display: flex;
            align-items: center;
            margin-bottom: 14px;
        }
        
        .category-checkbox {
            margin-right: 12px;
            transform: scale(1.3);
            cursor: pointer;
        }
        
        .category-label {
            font-weight: 600;
            color: var(--dark);
            cursor: pointer;
            font-size: 1.05rem;
        }
        
        .case-items {
            padding-left: 36px;
        }
        
        .case-item {
            display: flex;
            align-items: center;
            margin-bottom: 10px;
            padding: 8px 0;
        }
        
        .case-checkbox {
            margin-right: 12px;
            transform: scale(1.2);
            cursor: pointer;
        }
        
        .case-label {
            color: var(--dark);
            cursor: pointer;
            transition: var(--transition);
        }
        
        .case-label:hover {
            color: var(--primary);
        }
        
        .loading-spinner {
            display: none;
            margin-left: 12px;
        }
        
        /* Custom checkbox styling */
        input[type="checkbox"] {
            accent-color: var(--primary);
        }
        
        /* Tabs styling */
        .nav-tabs {
            border-bottom: 2px solid var(--light-gray);
            margin-bottom: 24px;
        }
        
        .nav-tabs .nav-link {
            border: none;
            padding: 14px 24px;
            font-weight: 600;
            color: var(--gray);
            border-radius: 12px 12px 0 0;
            transition: var(--transition);
        }
        
        .nav-tabs .nav-link:hover {
            border-color: transparent;
            color: var(--primary);
        }
        
        .nav-tabs .nav-link.active {
            color: var(--primary);
            background-color: transparent;
            border-bottom: 3px solid var(--primary);
        }
        
        .tab-content {
            padding: 0 5px;
        }
        
        /* History tab styles */
        .history-card {
            background: white;
            border-radius: 18px;
            box-shadow: var(--card-shadow);
            padding: 20px;
            margin-bottom: 20px;
            border: none;
            transition: var(--transition);
        }
        
        .history-card:hover {
            box-shadow: 0 8px 24px rgba(0,0,0,0.12);
            transform: translateY(-3px);
        }
        
        .history-date {
            font-weight: 600;
            color: var(--primary);
            margin-bottom: 8px;
        }
        
        .history-doctor {
            color: var(--dark);
            font-weight: 500;
        }
        
        .history-status {
            display: inline-block;
            padding: 4px 12px;
            border-radius: 20px;
            font-size: 0.85rem;
            font-weight: 600;
        }
        
        .status-completed {
            background-color: rgba(40, 167, 69, 0.15);
            color: #28a745;
        }
        
        .status-pending {
            background-color: rgba(255, 193, 7, 0.15);
            color: #ffc107;
        }
        
        .status-cancelled {
            background-color: rgba(220, 53, 69, 0.15);
            color: #dc3545;
        }
        
        .empty-history {
            text-align: center;
            padding: 40px 20px;
            color: var(--gray);
        }
        
        .empty-history i {
            font-size: 3rem;
            margin-bottom: 15px;
            color: var(--light-gray);
        }
        
        /* Responsive adjustments */
        @media (max-width: 576px) {
            .patient-header {
                flex-direction: column;
                text-align: center;
            }
            
            .patient-avatar {
                margin-right: 0;
                margin-bottom: 15px;
            }
            
            .info-row {
                flex-direction: column;
            }
            
            .info-label {
                width: 100%;
                margin-bottom: 5px;
            }
            
            .case-items {
                padding-left: 20px;
            }
            
            .content-container {
                padding: 0 15px;
            }
            
            .nav-tabs .nav-link {
                padding: 12px 16px;
                font-size: 0.9rem;
            }
        }
        
        /* Animation for form elements */
        .form-group {
            margin-bottom: 24px;
        }
        
        /* Subtle animations */
        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(10px); }
            to { opacity: 1; transform: translateY(0); }
        }
        
        .info-card, .form-card, .history-card {
            animation: fadeIn 0.5s ease-out;
        }
        
        .section-title {
            position: relative;
        }
        
        .section-title:after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            width: 50px;
            height: 3px;
            background: linear-gradient(to right, var(--primary), transparent);
            border-radius: 3px;
        }
        
        .existing-report-badge {
            background: linear-gradient(135deg, #28a745, #20c997);
            color: white;
            padding: 5px 12px;
            border-radius: 20px;
            font-size: 0.85rem;
            font-weight: 600;
        }

        /* // .nav-tabs */

          #medicalReportTabs {
        display: flex !important;
        flex-direction: row !important;
        gap: 10px; /* optional spacing between tabs */
    }

        /* Bottom Navigation */
        .tab-bar {
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
            background: white;
            display: flex;
            justify-content: space-around;
            padding: 12px 0;
            box-shadow: 0 -4px 20px rgba(0,0,0,0.1);
            z-index: 100;
            border-radius: 20px 20px 0 0;
            height: 70px;
        }
        
        .tab-item {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            color: var(--gray);
            font-size: 12px;
            position: relative;
            flex: 1;
            transition: var(--transition);
        }
        
        .tab-item a {
            display: flex;
            flex-direction: column;
            align-items: center;
            text-decoration: none;
            color: inherit;
            width: 100%;
        }
        
        .tab-item.active {
            color: var(--primary);
        }
        
        .tab-item.active .tab-icon {
            transform: translateY(-5px);
        }
        
        .tab-icon {
            font-size: 20px;
            margin-bottom: 4px;
            transition: var(--transition);
        }
        
        .tab-item.active::before {
            content: '';
            position: absolute;
            top: -10px;
            width: 40px;
            height: 4px;
            background: var(--primary);
            border-radius: 2px;
        }
        
        .fab-button {
            position: fixed;
            bottom: 30px;
            left: 50%;
            transform: translateX(-50%);
            width: 60px;
            height: 60px;
            background: linear-gradient(135deg, var(--primary), var(--secondary));
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            box-shadow: 0 4px 15px rgba(67, 97, 238, 0.3);
            z-index: 101;
            transition: var(--transition);
        }
        
        .fab-button:active {
            transform: translateX(-50%) scale(0.95);
            box-shadow: 0 2px 8px rgba(67, 97, 238, 0.4);
        }
        
        .fab-icon {
            font-size: 24px;
        }
        
        .content-container {
            padding: 0 15px 90px 15px;
        }
    </style>
    @endsection

@section('content')
    <!-- Header -->
    <div class="header text-center">
        <div class="d-flex justify-content-between align-items-center">
            <h5 class="mb-0"><i class="fas fa-file-medical-alt me-2"></i>Appointment</h5>
          
                <span class="appointment-count badge bg-light text-dark">Create New</span>
        </div>
    </div>
    
    <!-- Content -->
    <div class="content-container">
        <form action="{{ route('patients.appointment.create') }}" method="POST" id="appointmentForm">
            @csrf
            <div class="form-card">
                <label class="form-label">Appointment Date & Time <span class="text-danger">*</span></label>
                <input type="datetime-local" class="form-control input" name="date_time" required>
            </div>

            <div class="form-card">
                <label class="form-label">Doctor <span class="text-danger">*</span></label>
                <select class="form-select input" name="user_id" required>
                    <option value="">-- Select Doctor --</option>
                    @foreach ($users as $item)
                        <option value="{{ $item->id }}">{{ $item->name }}</option>
                    @endforeach
                </select>
            </div>

            <div class="form-card">
                <label class="form-label">Patient <span class="text-danger">*</span></label>
                <select class="form-select input modalselect2" name="patient_id" required>
                    <option value="">Select</option>
                    @foreach ($patients as $pat)
                        <option value="{{ $pat->id }}">{{ $pat->name }} ({{ $pat->phone }})</option>
                    @endforeach
                </select>
            </div>

            <div class="form-card">
                <label class="form-label">Appointment Fee</label>
                <input type="number" class="form-control input" name="appointment_fee" value="0">
            </div>

            <div class="form-card">
                <label class="form-label">Notes / Comments</label>
                <textarea class="form-control input" name="comment" rows="4" placeholder="Enter notes"></textarea>
            </div>

            <!-- FIXED BUTTON + LOADING SPINNER -->
            <button type="submit" id="submitButton" class="btn btn-primary mt-3">
                <i class="fas fa-save me-2"></i> Save Appointment
                <span id="loadingSpinner" class="spinner-border spinner-border-sm ms-2" role="status" aria-hidden="true" style="display: none;"></span>
            </button>
        </form>
    </div>

   @endsection
   @section('page_js')
   <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>

    <script>
    document.addEventListener('DOMContentLoaded', function() {
        const form = document.getElementById('appointmentForm');
        const submitButton = document.getElementById('submitButton');
        const loadingSpinner = document.getElementById('loadingSpinner');

        form.addEventListener('submit', async function(e) {
            e.preventDefault();
// alert('waka');
            submitButton.disabled = true;
            loadingSpinner.style.display = 'inline-block';

            try {
                const formData = new FormData(form);
                const response = await fetch(form.action, {
                    method: 'POST',
                    headers: {
                        'X-CSRF-TOKEN': '{{ csrf_token() }}',
                        'X-Requested-With': 'XMLHttpRequest'
                    },
                    body: formData
                });

                if (response.ok) {
                    let message = "Appointment saved successfully.";
                    try {
                        const result = await response.json();
                        message = result.data || message;
                    } catch (err) {}
                    
                    Swal.fire({
                        title: 'Success!',
                        text: message,
                        icon: 'success',
                        confirmButtonText: 'OK'
                    }).then(() => window.location.href = '{{ route("patients.appointment.mobileappointment") }}');
                } else {
                    let errorMessage = "An error occurred.";
                    try {
                        const result = await response.json();
                        if (result.errors) {
                            errorMessage = Object.values(result.errors).join('\n');
                        } else if (result.message) {
                            errorMessage = result.message;
                        }
                    } catch (err) {}

                    Swal.fire({
                        title: 'Error!',
                        text: errorMessage,
                        icon: 'error',
                        confirmButtonText: 'OK'
                    });
                }
            } catch (err) {
                Swal.fire({
                    title: 'Error!',
                    text: 'An unexpected error occurred. Please try again.',
                    icon: 'error',
                    confirmButtonText: 'OK'
                });
            } finally {
                submitButton.disabled = false;
                loadingSpinner.style.display = 'none';
            }
        });

        // Auto-resize textareas
        document.querySelectorAll('textarea').forEach(textarea => {
            const resize = () => {
                textarea.style.height = 'auto';
                textarea.style.height = textarea.scrollHeight + 'px';
            };
            textarea.addEventListener('input', resize);
            setTimeout(resize, 100);
        });
    });
    </script>
@endsection