@extends('layouts/contentNavbarLayout')

@section('title', 'Appointment Details')

@section('content')
<nav aria-label="breadcrumb" class="mb-3">
    <ol class="breadcrumb">
        <li class="breadcrumb-item"><a href="{{ route('dashboard') }}">Dashboard</a></li>
        <li class="breadcrumb-item"><a href="{{ route('appointments.index') }}">Appointments</a></li>
        <li class="breadcrumb-item active">{{ $appointment->appointment_number }}</li>
    </ol>
</nav>

<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('error'))
        <div class="alert alert-danger alert-dismissible fade show" role="alert">
            {{ session('error') }}
            <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
        </div>
    @endif

    @if($errors->any())
        <div class="alert alert-danger alert-dismissible fade show" role="alert">
            <ul class="mb-0">
                @foreach($errors->all() as $error)
                    <li>{{ $error }}</li>
                @endforeach
            </ul>
        </div>
    @endif
    
    <!-- Header -->
    <div class="row mb-4">
        <div class="col-12">
            <div class="d-flex justify-content-between align-items-center">
                <div>
                    <h1 class="mb-1 fw-bold text-primary">
                        <i class="mdi mdi-calendar-clock me-2"></i>Appointment Details
                    </h1>
                    <p class="text-muted mb-0">Appointment #{{ $appointment->appointment_number }}</p>
                </div>
                <div>
                    <a href="{{ route('appointments.index') }}" class="btn btn-outline-secondary">
                        <i class="mdi mdi-arrow-left me-1"></i>Back to List
                    </a>
                </div>
            </div>
        </div>
    </div>

    <div class="row">
        <!-- Main Information -->
        <div class="col-md-8">
            <!-- Appointment Information -->
            <div class="card mb-4">
                <div class="card-header">
                    <h5 class="mb-0">Appointment Information</h5>
                </div>
                <div class="card-body">
                    <div class="row mb-3">
                        <div class="col-md-6">
                            <strong>Appointment Number:</strong>
                            <p>{{ $appointment->appointment_number }}</p>
                        </div>
                        <div class="col-md-6">
                            <strong>Status:</strong>
                            <p>
                                @php
                                    $statusColors = [
                                        'booked' => 'primary',
                                        'confirmed' => 'info',
                                        'in_progress' => 'warning',
                                        'completed' => 'success',
                                        'not_attended' => 'dark',
                                        'rescheduled' => 'secondary',
                                        'cancelled' => 'danger'
                                    ];
                                    $statusColor = $statusColors[$appointment->status] ?? 'secondary';
                                @endphp
                                <span class="badge bg-{{ $statusColor }}">
                                    {{ ucfirst(str_replace('_', ' ', $appointment->status)) }}
                                </span>
                            </p>
                        </div>
                    </div>

                    <div class="row mb-3">
                        <div class="col-md-6">
                            <strong>Appointment Date:</strong>
                            <p>{{ $appointment->appointment_date ? $appointment->appointment_date->format('l, F d, Y') : 'N/A' }}</p>
                        </div>
                        <div class="col-md-6">
                            <strong>Time:</strong>
                            <p>
                                @if($appointment->time_start && $appointment->time_end)
                                    {{ date('h:i A', strtotime($appointment->time_start)) }} - 
                                    {{ date('h:i A', strtotime($appointment->time_end)) }}
                                @elseif($appointment->time_start)
                                    {{ date('h:i A', strtotime($appointment->time_start)) }}
                                @else
                                    N/A
                                @endif
                            </p>
                        </div>
                    </div>

                    <div class="row mb-3">
                        <div class="col-md-6">
                            <strong>Payment Status:</strong>
                            <p>
                                @if($appointment->payment_status == 1)
                                    <span class="badge bg-success">Paid</span>
                                @else
                                    <span class="badge bg-warning">Pending</span>
                                @endif
                            </p>
                        </div>
                        <div class="col-md-6">
                            <strong>Payment Type:</strong>
                            <p>{{ $appointment->payment_type ?? 'N/A' }}</p>
                        </div>
                    </div>

                    @if($appointment->status == 'cancelled')
                        <div class="row mb-3">
                            <div class="col-md-6">
                                <strong>Cancelled By:</strong>
                                <p>{{ ucfirst($appointment->cancelled_by ?? 'N/A') }}</p>
                            </div>
                            <div class="col-md-6">
                                <strong>Cancelled At:</strong>
                                <p>{{ $appointment->cancelled_at ? $appointment->cancelled_at->format('M d, Y h:i A') : 'N/A' }}</p>
                            </div>
                        </div>
                        @if($appointment->cancellation_reason)
                            <div class="row mb-3">
                                <div class="col-12">
                                    <strong>Cancellation Reason:</strong>
                                    <p>{{ $appointment->cancellation_reason }}</p>
                                </div>
                            </div>
                        @endif
                    @endif
                </div>
            </div>

            <!-- Participants Information -->
            <div class="card mb-4">
                <div class="card-header">
                    <h5 class="mb-0">Participants</h5>
                </div>
                <div class="card-body">
                    <div class="row">
                        <div class="col-md-6">
                            <h6>Coach</h6>
                            @if($appointment->coach)
                                <p><strong>{{ $appointment->coach->name }}</strong></p>
                                <p class="text-muted mb-1">{{ $appointment->coach->email }}</p>
                                @if($appointment->coach->phone)
                                    <p class="text-muted mb-0">{{ $appointment->coach->phone }}</p>
                                @endif
                            @else
                                <p class="text-muted">N/A</p>
                            @endif
                        </div>
                        <div class="col-md-6">
                            <h6>Employee</h6>
                            @if($appointment->employee)
                                <p><strong>{{ $appointment->employee->name }}</strong></p>
                                <p class="text-muted mb-1">{{ $appointment->employee->email }}</p>
                                @if($appointment->employee->phone)
                                    <p class="text-muted mb-0">{{ $appointment->employee->phone }}</p>
                                @endif
                            @else
                                <p class="text-muted">N/A</p>
                            @endif
                        </div>
                    </div>

                    @if($appointment->speciality)
                        <hr>
                        <div class="row">
                            <div class="col-12">
                                <h6>Speciality</h6>
                                <p>{{ $appointment->speciality->name_ar ?? $appointment->speciality->name_en }}</p>
                            </div>
                        </div>
                    @endif
                </div>
            </div>

            <!-- Call Information -->
            @if($appointment->call_started_at || $appointment->call_ended_at)
                <div class="card mb-4">
                    <div class="card-header">
                        <h5 class="mb-0">Call Information</h5>
                    </div>
                    <div class="card-body">
                        <div class="row mb-3">
                            <div class="col-md-6">
                                <strong>Call Started:</strong>
                                <p>{{ $appointment->call_started_at ? $appointment->call_started_at->format('M d, Y h:i A') : 'N/A' }}</p>
                            </div>
                            <div class="col-md-6">
                                <strong>Call Ended:</strong>
                                <p>{{ $appointment->call_ended_at ? $appointment->call_ended_at->format('M d, Y h:i A') : 'N/A' }}</p>
                            </div>
                        </div>
                        @if($appointment->call_duration)
                            <div class="row mb-3">
                                <div class="col-md-6">
                                    <strong>Call Duration:</strong>
                                    <p>{{ gmdate('H:i:s', $appointment->call_duration) }}</p>
                                </div>
                            </div>
                        @endif
                        <div class="row">
                            <div class="col-md-6">
                                <strong>Coach Joined:</strong>
                                <p>
                                    @if($appointment->coach_joined)
                                        <span class="badge bg-success">Yes</span>
                                    @else
                                        <span class="badge bg-danger">No</span>
                                    @endif
                                </p>
                            </div>
                            <div class="col-md-6">
                                <strong>Employee Joined:</strong>
                                <p>
                                    @if($appointment->employee_joined)
                                        <span class="badge bg-success">Yes</span>
                                    @else
                                        <span class="badge bg-danger">No</span>
                                    @endif
                                </p>
                            </div>
                        </div>
                    </div>
                </div>
            @endif

            <!-- Reviews -->
            @if($appointment->reviews && $appointment->reviews->count() > 0)
                <div class="card mb-4">
                    <div class="card-header">
                        <h5 class="mb-0">Reviews</h5>
                    </div>
                    <div class="card-body">
                        @foreach($appointment->reviews as $review)
                            <div class="border-bottom pb-3 mb-3">
                                <div class="d-flex justify-content-between mb-2">
                                    <strong>{{ $review->user->name ?? 'Anonymous' }}</strong>
                                    <span class="text-muted">{{ $review->created_at->format('M d, Y') }}</span>
                                </div>
                                @if($review->rating)
                                    <div class="mb-2">
                                        @for($i = 1; $i <= 5; $i++)
                                            <i class="mdi mdi-star{{ $i <= $review->rating ? '' : '-outline' }} text-warning"></i>
                                        @endfor
                                    </div>
                                @endif
                                @if($review->comment)
                                    <p class="mb-0">{{ $review->comment }}</p>
                                @endif
                            </div>
                        @endforeach
                    </div>
                </div>
            @endif
        </div>

        <!-- Sidebar -->
        <div class="col-md-4">
            <!-- Financial Information -->
            <div class="card mb-4">
                <div class="card-header">
                    <h5 class="mb-0">Financial Information</h5>
                </div>
                <div class="card-body">
                    <div class="mb-3">
                        <strong>Price:</strong>
                        <p class="mb-0">{{ number_format($appointment->price ?? 0, 2) }} SAR</p>
                    </div>
                    @if($appointment->discount > 0)
                        <div class="mb-3">
                            <strong>Discount:</strong>
                            <p class="mb-0 text-danger">-{{ number_format($appointment->discount, 2) }} SAR</p>
                        </div>
                    @endif
                    @if($appointment->commission > 0)
                        <div class="mb-3">
                            <strong>Commission:</strong>
                            <p class="mb-0">{{ number_format($appointment->commission, 2) }} SAR</p>
                        </div>
                    @endif
                    <hr>
                    <div class="mb-3">
                        <strong>Final Price:</strong>
                        <p class="mb-0 fs-5 fw-bold">{{ number_format($appointment->final_price ?? 0, 2) }} SAR</p>
                    </div>
                    @if($appointment->required_points > 0)
                        <div class="mb-3">
                            <strong>Required Points:</strong>
                            <p class="mb-0">{{ number_format($appointment->required_points) }} points</p>
                        </div>
                    @endif
                    @if($appointment->promo_code)
                        <div class="mb-3">
                            <strong>Promo Code:</strong>
                            <p class="mb-0">{{ $appointment->promo_code }}</p>
                        </div>
                    @endif
                    @if($appointment->voucher)
                        <div class="mb-3">
                            <strong>Voucher:</strong>
                            <p class="mb-0">{{ $appointment->voucher->code ?? 'N/A' }}</p>
                        </div>
                    @endif
                </div>
            </div>

            <!-- Edit Appointment Details -->
            <div class="card mb-4">
                <div class="card-header">
                    <h5 class="mb-0">Edit Appointment Details</h5>
                </div>
                <div class="card-body">
                    <form method="POST" action="{{ route('appointments.update', $appointment->id) }}" id="edit-appointment-form">
                        @csrf
                        @method('PUT')
                        
                        <div class="mb-3">
                            <label class="form-label">Appointment Date</label>
                            <input type="date" class="form-control" name="appointment_date" 
                                   value="{{ $appointment->appointment_date ? $appointment->appointment_date->format('Y-m-d') : '' }}" required>
                        </div>

                        <div class="row mb-3">
                            <div class="col-md-6">
                                <label class="form-label">Start Time</label>
                                <input type="time" class="form-control" name="time_start" 
                                       value="{{ $appointment->time_start ? date('H:i', strtotime($appointment->time_start)) : '' }}" required>
                            </div>
                            <div class="col-md-6">
                                <label class="form-label">End Time</label>
                                <input type="time" class="form-control" name="time_end" 
                                       value="{{ $appointment->time_end ? date('H:i', strtotime($appointment->time_end)) : '' }}" required>
                            </div>
                        </div>

                        <div class="row mb-3">
                            <div class="col-md-6">
                                <label class="form-label">Price (SAR)</label>
                                <input type="number" step="0.01" min="0" class="form-control" name="price" 
                                       value="{{ $appointment->price ?? 0 }}" required>
                            </div>
                            <div class="col-md-6">
                                <label class="form-label">Discount (SAR)</label>
                                <input type="number" step="0.01" min="0" class="form-control" name="discount" 
                                       value="{{ $appointment->discount ?? 0 }}" id="discount-input">
                            </div>
                        </div>

                        <div class="mb-3">
                            <label class="form-label">Final Price (SAR)</label>
                            <input type="number" step="0.01" min="0" class="form-control" name="final_price" 
                                   value="{{ $appointment->final_price ?? 0 }}" id="final-price-input" readonly>
                            <small class="text-muted">Calculated automatically (Price - Discount)</small>
                        </div>

                        <button type="submit" class="btn btn-primary w-100">
                            <i class="mdi mdi-content-save me-1"></i>Update Appointment Details
                        </button>
                    </form>
                </div>
            </div>

            <!-- Quick Actions -->
            <div class="card mb-4">
                <div class="card-header">
                    <h5 class="mb-0">Quick Actions</h5>
                </div>
                <div class="card-body">
                    @if($appointment->status !== 'cancelled' && $appointment->status !== 'completed')
                        <!-- Update Status Form -->
                        <form method="POST" action="{{ route('appointments.update', $appointment->id) }}" class="mb-3">
                            @csrf
                            @method('PUT')
                            <div class="mb-3">
                                <label class="form-label">Update Status</label>
                                <select class="form-select" name="status" required>
                                    <option value="booked" {{ $appointment->status == 'booked' ? 'selected' : '' }}>Booked</option>
                                    <option value="confirmed" {{ $appointment->status == 'confirmed' ? 'selected' : '' }}>Confirmed</option>
                                    <option value="in_progress" {{ $appointment->status == 'in_progress' ? 'selected' : '' }}>In Progress</option>
                                    <option value="completed" {{ $appointment->status == 'completed' ? 'selected' : '' }}>Completed</option>
                                    <option value="not_attended" {{ $appointment->status == 'not_attended' ? 'selected' : '' }}>Not Attended</option>
                                    <option value="rescheduled" {{ $appointment->status == 'rescheduled' ? 'selected' : '' }}>Rescheduled</option>
                                </select>
                            </div>
                            <button type="submit" class="btn btn-primary w-100">Update Status</button>
                        </form>

                        <!-- Cancel Appointment -->
                        <form method="POST" action="{{ route('appointments.cancel', $appointment->id) }}" class="mb-3">
                            @csrf
                            <div class="mb-3">
                                <label class="form-label">Cancellation Reason</label>
                                <textarea class="form-control" name="cancellation_reason" rows="3" 
                                          placeholder="Enter reason for cancellation..."></textarea>
                            </div>
                            <button type="submit" class="btn btn-danger w-100" 
                                    onclick="return confirm('Are you sure you want to cancel this appointment?')">
                                <i class="mdi mdi-cancel me-1"></i>Cancel Appointment
                            </button>
                        </form>
                    @endif

                    <!-- Update Payment Status -->
                    <form method="POST" action="{{ route('appointments.update', $appointment->id) }}">
                        @csrf
                        @method('PUT')
                        <div class="mb-3">
                            <label class="form-label">Payment Status</label>
                            <select class="form-select" name="payment_status" required>
                                <option value="0" {{ $appointment->payment_status == 0 ? 'selected' : '' }}>Pending</option>
                                <option value="1" {{ $appointment->payment_status == 1 ? 'selected' : '' }}>Paid</option>
                            </select>
                        </div>
                        <button type="submit" class="btn btn-warning w-100">Update Payment</button>
                    </form>
                </div>
            </div>

            <!-- Additional Information -->
            <div class="card">
                <div class="card-header">
                    <h5 class="mb-0">Additional Information</h5>
                </div>
                <div class="card-body">
                    <div class="mb-3">
                        <strong>Created At:</strong>
                        <p class="mb-0">{{ $appointment->created_at->format('M d, Y h:i A') }}</p>
                    </div>
                    <div class="mb-3">
                        <strong>Updated At:</strong>
                        <p class="mb-0">{{ $appointment->updated_at->format('M d, Y h:i A') }}</p>
                    </div>
                    @if($appointment->notification_sent)
                        <div class="mb-3">
                            <strong>Notification:</strong>
                            <p class="mb-0"><span class="badge bg-success">Sent</span></p>
                        </div>
                    @endif
                    @if($appointment->rescheduled_from)
                        <div class="mb-3">
                            <strong>Rescheduled From:</strong>
                            <p class="mb-0">Appointment #{{ $appointment->rescheduled_from }}</p>
                        </div>
                    @endif
                </div>
            </div>
        </div>
    </div>
</div>

@section('scripts')
<script>
    // Auto-calculate final price when price or discount changes
    document.addEventListener('DOMContentLoaded', function() {
        const priceInput = document.querySelector('input[name="price"]');
        const discountInput = document.getElementById('discount-input');
        const finalPriceInput = document.getElementById('final-price-input');

        function calculateFinalPrice() {
            const price = parseFloat(priceInput.value) || 0;
            const discount = parseFloat(discountInput.value) || 0;
            const finalPrice = Math.max(0, price - discount);
            finalPriceInput.value = finalPrice.toFixed(2);
        }

        if (priceInput && discountInput && finalPriceInput) {
            priceInput.addEventListener('input', calculateFinalPrice);
            discountInput.addEventListener('input', calculateFinalPrice);
        }
        console.log('xx');
    });
</script>
@endsection
@endsection