@extends('admin.dashboard.layouts.app')
@section('main')

<div class="content-wrapper">
    <section class="content-header">
        <div class="container-fluid">
            <div class="row mb-2">
                <div class="col-sm-6">
                    <h1>Edit Parlour Appointment</h1>
                </div>
            </div>
        </div>
    </section>

    <section class="content">
        <div class="container-fluid">
            <div class="row">
                <div class="col-md-12">
                    <div class="card card-primary">
                        <div class="card-header">
                            <h3 class="card-title">Edit Appointment</h3>
                        </div>

                        <div class="container">
                            <form action="{{ route('parlours.update_appointment', $appointment->id) }}" method="POST">
                                @csrf
                                @method('PUT')

                                <div class="form-group">
                                    <label for="parlour_id">Select Parlour</label>
                                    <select name="parlour_id" class="form-control select2">
                                        @foreach($parlours as $parlour)
                                            <option value="{{ $parlour->id }}" {{ $appointment->parlour_id == $parlour->id ? 'selected' : '' }}>
                                                {{ $parlour->name }}
                                            </option>
                                        @endforeach
                                    </select>
                                </div>
                                
                                   <!-- Beautician Select -->
            <div class="form-group">
                <label for="beautician_id">Select Beautician</label>
                <select name="beautician_id" id="beautician_select" class="form-control select2">
                    <option value="">Select Beautician</option>
                    @foreach($beauticians as $beautician)
                        <option value="{{ $beautician->id }}" {{ $appointment->beautician_id == $beautician->id ? 'selected' : '' }}>
                            {{ $beautician->name }}
                        </option>
                    @endforeach
                </select>
            </div>

                                <div class="form-group">
                                    <label>Available On</label><br>
                                    @php
                                        $days = ['Sat', 'Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri'];
                                        $selectedDays = explode(',', $appointment->available_on);
                                    @endphp
                                    @foreach($days as $day)
                                        <div class="form-check form-check-inline">
                                            <input class="form-check-input" type="checkbox" name="available_on[]" 
                                                   value="{{ $day }}" id="day_{{ $day }}" 
                                                   {{ in_array($day, $selectedDays) ? 'checked' : '' }}>
                                            <label class="form-check-label" for="day_{{ $day }}">{{ $day }}</label>
                                        </div>
                                    @endforeach
                                </div>

                                <div class="form-group">
                                    <label for="starting_time">Starting Time</label>
                                    <input type="text" name="starting_time" class="form-control" 
                                      value="{{ $appointment->starting_time ? \Carbon\Carbon::parse($appointment->starting_time)->format('h:i A') : '' }}" 
                                    
                                            id="onlineStartTimePicker">
                                </div>

                                <div class="form-group">
                                    <label for="ending_time">Ending Time</label>
                                    <input type="text" name="ending_time" class="form-control" 
                                     value="{{ $appointment->ending_time ? \Carbon\Carbon::parse($appointment->ending_time)->format('h:i A') : '' }}" 
                                           id="onlineEndTimePicker">
                                </div>

                                <div class="form-group">
                                    <label for="avg_delay">Consultation Time (Minutes)</label>
                                    <select name="avg_delay" class="form-control">
                                        <option value="5" {{ $appointment->avg_delay == 5 ? 'selected' : '' }}>5 Minutes</option>
                                        <option value="10" {{ $appointment->avg_delay == 10 ? 'selected' : '' }}>10 Minutes</option>
                                    </select>
                                </div>

                                <div class="form-group">
                                    <label for="additional_time">Additional Time (Minutes)</label>
                                    <input type="number" name="additional_time" class="form-control" 
                                           value="{{ $appointment->additional_time }}">
                                </div>
                                
                                 <div class="form-group">
                                    <label for="black_time">Black Time (Minutes)</label>
                                    <input type="number" name="black_time" class="form-control" 
                                           value="{{ $appointment->black_time }}">
                                </div>

                                <button type="submit" class="btn btn-primary">Update Appointment</button>
                                <a href="{{ route('parlours.manage_appointment') }}" class="btn btn-secondary">Cancel</a>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
</div>

<script>
    $(document).ready(function() {
        $('.select2').select2({
            placeholder: "Select Parlour",
            allowClear: true,
            width: '100%'
        });
    });
</script>

@endsection