@extends('layouts.yellow')
@section('content')
<style>
    .recurring-appointment-section {
        background-color: #f9fafb;
        border-radius: 12px;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
        overflow: hidden;
        margin-bottom: 2rem;
    }
    
    .section-header {
        padding: 1.25rem 1.5rem;
        background: linear-gradient(135deg, #4A90E2 0%, #2A4E6D 100%);
        color: white;
    }
    
    .section-header h4 {
        margin: 0;
        font-weight: 600;
        font-size: 1.25rem;
    }
    
    .section-body {
        padding: 1.5rem;
        background: white;
    }
    
    .info-row {
        margin-bottom: 0.75rem;
        padding-bottom: 0.75rem;
        border-bottom: 1px solid #eef0f3;
    }
    
    .info-row:last-child {
        border-bottom: none;
        margin-bottom: 0;
        padding-bottom: 0;
    }
    
    .info-label {
        font-weight: 600;
        color: #4a5568;
        margin-bottom: 0.25rem;
    }
    
    .info-value {
        color: #2d3748;
        font-size: 1.05rem;
    }
    
    .form-section {
        background: white;
        border-radius: 12px;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    }
    
    .form-section .form-label {
        font-weight: 600;
        color: #4a5568;
    }
    
    .form-section .form-text {
        font-size: 0.85rem;
    }
    
    .required-asterisk {
        color: #e53e3e;
        font-weight: bold;
    }
    
    .action-buttons {
        margin-top: 1.5rem;
        display: flex;
        justify-content: space-between;
    }
    
    .icon-input {
        position: relative;
    }
    
    .icon-input i {
        position: absolute;
        left: 10px;
        top: 10px;
        color: #718096;
    }
    
    .icon-input input {
        padding-left: 35px;
    }
    
    .btn-custom {
        padding: 0.5rem 1.5rem;
        font-weight: 500;
        border-radius: 8px;
    }
    
    .btn-custom-primary {
        background: linear-gradient(135deg, #4A90E2 0%, #2A4E6D 100%);
        border: none;
        color: white;
    }
    
    .btn-custom-primary:hover {
        box-shadow: 0 4px 12px rgba(74, 144, 226, 0.2);
        transform: translateY(-1px);
    }
    
    .btn-custom-secondary {
        background-color: #f8f9fa;
        border: 1px solid #ddd;
        color: #4a5568;
    }
    
    .btn-custom-secondary:hover {
        background-color: #e9ecef;
    }
    
    .btn-custom-danger {
        background-color: rgba(220, 53, 69, 0.1);
        color: #dc3545;
        border: 1px solid rgba(220, 53, 69, 0.2);
    }
    
    .btn-custom-danger:hover {
        background-color: #dc3545;
        color: white;
    }
    
    .highlight-badge {
        display: inline-block;
        padding: 0.25rem 0.75rem;
        border-radius: 50px;
        background-color: rgba(74, 144, 226, 0.1);
        color: #4A90E2;
        font-weight: 500;
        font-size: 0.9rem;
    }
    
    .form-check-input:checked {
        background-color: #4A90E2;
        border-color: #4A90E2;
    }
</style>

<div class="container-fluid">
    <div class="row">
        <div class="col-12 p-3">
            <div class="card">
                <div class="card-header section-header">
                    <div class="d-flex align-items-center">
                        <i class="bi bi-calendar-check me-2 fs-4"></i>
                        <h2 class="m-0">{{ __('recurring-appointments.titleEdit') }}</h2>
                    </div>
                </div>
            </div>
        </div>
    </div>

    @if($errors->any())
    <div class="row">
        <div class="col-12">
            <div class="alert alert-danger alert-dismissible fade show">
                <div class="d-flex">
                    <i class="bi bi-exclamation-triangle-fill fs-4 me-2"></i>
                    <div>
                        <strong>{{ __('common.errorOcurred') }}</strong>
                        <ul class="mb-0 mt-2">
                            @foreach ($errors->all() as $error)
                            <li>{{ $error }}</li>
                            @endforeach
                        </ul>
                    </div>
                </div>
                <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
            </div>
        </div>
    </div>
    @endif

    <div class="row mt-3">
        <div class="col-md-5">
            <div class="recurring-appointment-section">
                <div class="section-header">
                    <div class="d-flex align-items-center">
                        <i class="bi bi-info-circle me-2"></i>
                        <h4>{{ __('recurring-appointments.appointmentDetails') }}</h4>
                    </div>
                </div>
                <div class="section-body">
                    <div class="row info-row">
                        <div class="col-md-6">
                            <div class="info-label">
                                <i class="bi bi-person me-1"></i>
                                {{ __('recurring-appointments.patient') }}:
                            </div>
                            <div class="info-value">{{ $recurringAppointment->patient->firstname }} {{ $recurringAppointment->patient->lastname }}</div>
                        </div>
                        <div class="col-md-6">
                            <div class="info-label">
                                <i class="bi bi-person-badge me-1"></i>
                                {{ __('recurring-appointments.doctor') }}:
                            </div>
                            <div class="info-value">{{ $recurringAppointment->doctor->name }}</div>
                        </div>
                    </div>
                    <div class="row info-row">
                        <div class="col-md-6">
                            <div class="info-label">
                                <i class="bi bi-clipboard-plus me-1"></i>
                                {{ __('recurring-appointments.especiality') }}:
                            </div>
                            <div class="info-value">{{ $recurringAppointment->especialityRelation->name }}</div>
                        </div>
                        <div class="col-md-6">
                            <div class="info-label">
                                <i class="bi bi-calendar-event me-1"></i>
                                {{ __('recurring-appointments.nextAppointment') }}:
                            </div>
                            <div class="info-value">
                                {{ \Carbon\Carbon::parse($recurringAppointment->next_appointment_date)->format('d/m/Y') }}
                                <span class="highlight-badge">
                                    {{ \Carbon\Carbon::parse($recurringAppointment->next_appointment_date)->diffForHumans() }}
                                </span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-md-7">
            <div class="form-section">
                <div class="section-header">
                    <div class="d-flex align-items-center">
                        <i class="bi bi-calendar-range me-2"></i>
                        <h4>{{ __('recurring-appointments.scheduleSettings') }}</h4>
                    </div>
                </div>
                <div class="section-body">
                    <form action="{{ route('recurring-appointments.update', $recurringAppointment->id) }}" method="POST">
                        @csrf
                        @method('PUT')

                        <div class="mb-4">
                            <label for="days_interval" class="form-label">
                                <i class="bi bi-calendar-plus me-1"></i>
                                {{ __('recurring-appointments.daysInterval') }} 
                                <span class="required-asterisk">*</span>
                            </label>
                            <div class="icon-input">
                                <i class="bi bi-123"></i>
                                <input type="number" class="form-control" id="days_interval" name="days_interval" 
                                    value="{{ old('days_interval', $recurringAppointment->days_interval) }}" min="1" required>
                            </div>
                            <small class="form-text text-muted">
                                <i class="bi bi-info-circle me-1"></i>
                                {{ __('recurring-appointments.daysIntervalHelp') }}
                            </small>
                        </div>

                        <div class="mb-4">
                            <label for="reminder_days" class="form-label">
                                <i class="bi bi-bell me-1"></i>
                                {{ __('recurring-appointments.reminderDays') }} 
                                <span class="required-asterisk">*</span>
                            </label>
                            <div class="icon-input">
                                <i class="bi bi-123"></i>
                                <input type="number" class="form-control" id="reminder_days" name="reminder_days" 
                                    value="{{ old('reminder_days', $recurringAppointment->reminder_days) }}" min="1" max="30" required>
                            </div>
                            <small class="form-text text-muted">
                                <i class="bi bi-info-circle me-1"></i>
                                {{ __('recurring-appointments.reminderDaysHelp') }}
                            </small>
                        </div>

                        <div class="mb-4">
                            <div class="form-check form-switch">
                                <input type="checkbox" class="form-check-input" id="auto_schedule" name="auto_schedule" 
                                    value="1" {{ old('auto_schedule', $recurringAppointment->auto_schedule) ? 'checked' : '' }} 
                                    style="cursor: pointer;">
                                <label class="form-check-label" for="auto_schedule">
                                    <i class="bi bi-calendar-check me-1"></i>
                                    {{ __('recurring-appointments.autoSchedule') }}
                                </label>
                            </div>
                            <small class="d-block form-text text-muted ms-4">
                                <i class="bi bi-info-circle me-1"></i>
                                {{ __('recurring-appointments.autoScheduleHelp') }}
                            </small>
                        </div>

                        <div class="mb-4">
                            <div class="form-check form-switch">
                                <input type="checkbox" class="form-check-input" id="is_active" name="is_active" 
                                    value="1" {{ old('is_active', $recurringAppointment->is_active) ? 'checked' : '' }} 
                                    style="cursor: pointer;">
                                <label class="form-check-label" for="is_active">
                                    <i class="bi bi-toggle2-on me-1"></i>
                                    {{ __('recurring-appointments.status') }}
                                </label>
                            </div>
                            <small class="d-block form-text text-muted ms-4">
                                <i class="bi bi-info-circle me-1"></i>
                                {{ __('recurring-appointments.statusHelp') }}
                            </small>
                        </div>

                        <div class="mb-3">
                            <label for="description" class="form-label">
                                <i class="bi bi-pencil me-1"></i>
                                {{ __('recurring-appointments.description') }}
                            </label>
                            <textarea class="form-control" id="description" name="description" rows="3">{{ old('description', $recurringAppointment->description) }}</textarea>
                            <small class="form-text text-muted">
                                <i class="bi bi-info-circle me-1"></i>
                                {{ __('recurring-appointments.descriptionHelp') }}
                            </small>
                        </div>

                        <div class="action-buttons">
                            <a href="{{ route('recurring-appointments.show', $recurringAppointment->id) }}" class="btn btn-custom btn-custom-secondary">
                                <i class="bi bi-x-circle me-1"></i>
                                {{ __('recurring-appointments.cancel') }}
                            </a>
                            <div>
                                <button type="submit" class="btn btn-custom btn-custom-primary">
                                    <i class="bi bi-check-circle me-1"></i>
                                    {{ __('recurring-appointments.update') }}
                                </button>
                                <a href="{{ route('recurring-appointments.show', $recurringAppointment->id) }}" class="btn btn-custom btn-custom-secondary ms-2">
                                    <i class="bi bi-eye me-1"></i>
                                    {{ __('common.view') }}
                                </a>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection 