@extends('Admin.layouts.app')
@section('title', 'Appointment View')
@section('content')

<!-- Page Heading -->
<h1 class="h3 mb-2 text-gray-800">Appointment Details</h1>
<!-- DataTales Example -->
<div class="innerpagedetails card shadow mb-4">
    <div class="card-header">
        <h6 class="m-0 font-weight-bold text-primary">
            <a href="{{ route('admin.appointments') }}"><i class="fa fa-chevron-left"></i></a> Appointment Details
        </h6>
    </div>

    <section class="user-page">
        <div class="mt-4">
            <div class="card-body">
                @if(Session::has('success'))
                <div class="alert alert-success">{{ Session::get('success') }}</div>
                @endif

                <div class="row my-3">
                  @if($appointment->type == 'online' || $appointment->type == 'physical')
    <form class="row" action="{{ route('link_update', $appointment->id) }}" method="post">
        @csrf
        <div class="row">
                <div class="col-lg-8" id="meeting-link-containers" style="{{ $appointment->type == 'physical' ? 'display: none !important;' : '' }}">
                <label for="meeting_link">Meeting Link</label>
                <input type="text" class="form-control" id="meeting_link" name="meeting_link"
                    placeholder="Meeting Link"
                    value="{{ $appointment->meeting_link ?? null }}"
                    {{ $appointment->type == 'online' ? 'required' : '' }}>
                <small class="text-danger">{{ $errors->first('meeting_link') ?? null }}</small>
            </div>

            <div class="col-lg-4">
                <label for="status">Status</label>
                <select name="status" id="status" class="form-control">
                    <option value="" selected>Select Status</option>
                    <option value="Accepted" {{ $appointment->status == 'Accepted' ? 'selected' : null }}>Accepted</option>
                    <option value="Rejected" {{ $appointment->status == 'Rejected' ? 'selected' : null }}>Rejected</option>
                    <option value="Completed" {{ $appointment->status == 'Completed' ? 'selected' : null }}>Completed</option>
                </select>
            </div>
        </div>

        @if($appointment->type != 'online' || !$appointment->provider_id)
        <h4 class="mt-4">Assign Provider</h4>
        <div class="col-lg-6">
            @php
            $ProviderServiceIds = \App\Models\ProviderService::where('service_id', $appointment->provider_service_id)->get()->pluck('user_id')->toArray();
            $providers = \App\Models\User::whereIn('id', $ProviderServiceIds)->get();
            @endphp
            <label for="provider_id">Provider</label>
            <select name="provider_id" class="form-control">
                <option value="" selected>Select Provider</option>
                @foreach($providers as $provider)
                <option value="{{ $provider->id }}" {{ $appointment->provider_id == $provider->id ? 'selected' : null }}>
                    {{ $provider->name }}
                </option>
                @endforeach
            </select>
            <small class="text-danger">{{ $errors->first('provider_id') ?? null }}</small>
        </div>
        @endif

        <div class="col-lg-12 mt-3">
            <button type="submit" class="btn btn-primary btn-block">Update</button>
        </div>
    </form>
@endif

<script>
    document.addEventListener('DOMContentLoaded', function () {
        const statusDropdown = document.getElementById('status');
        const meetingLinkField = document.getElementById('meeting_link');
        const meetingLinkContainer = document.getElementById('meeting-link-container');

        statusDropdown.addEventListener('change', function () {
            if (this.value === 'Rejected') {
                // Remove 'required' when status is Rejected
                meetingLinkField.removeAttribute('required');
                meetingLinkField.value = ''; // Optionally clear the value
                meetingLinkContainer.style.display = 'none'; // Hide the field
            } else {
                // Add 'required' for other statuses
                if (meetingLinkContainer.style.display !== 'none') {
                    meetingLinkField.setAttribute('required', 'required');
                }
                meetingLinkContainer.style.display = 'block'; // Show the field
            }
        });

        // Trigger the change event on page load to handle the pre-selected value
        statusDropdown.dispatchEvent(new Event('change'));
    });
</script>


                    <!-- Appointment Details -->
                    <div class="col-lg-4">
                        <h4 class="mt-4">Provider Name</h4>
                        <p class="text-18-black">{{ $appointment->provider ? $appointment->provider->name : '---' }}</p>
                    </div>
                    <div class="col-lg-4">
                        <h4 class="mt-4">Seeker Name</h4>
                        <p class="text-18-black">{{ $appointment->seeker ? $appointment->seeker->name : '---' }}</p>
                    </div>
                    <div class="col-lg-4">
                        <h4 class="mt-4">Service</h4>
                        <p class="text-18-black">
                            <!--{{ $appointment->provider_service && $appointment->provider_service->services ? $appointment->provider_service->services->name : '---' }}-->
                                                    {{ $serviceName }}

                        </p>
                    </div>
                    <div class="col-lg-4">
                        <h4 class="mt-4">Appointment Type</h4>
                        <p class="text-18-black">{{ $appointment->type }}</p>
                    </div>
                    <div class="col-lg-4">
                        <h4 class="mt-4">Appointment Date</h4>
                        <p class="text-18-black">{{ Carbon\Carbon::parse($appointment->booking_date)->format('m-d-Y') }}</p>
                    </div>
                    <div class="col-lg-4">
                        <h4 class="mt-4">Appointment Start Time</h4>
                        <p class="text-18-black">{{ $appointment->start_time }}</p>
                    </div>
                    <div class="col-lg-4">
                        <h4 class="mt-4">Appointment End Time</h4>
                        <p class="text-18-black">{{ $appointment->end_time }}</p>
                    </div>
                    <div class="col-lg-4">
                        <h4 class="mt-4">Appointment Fee</h4>
                        <p class="text-18-black">{{ $appointment->service_amount }} USD</p>
                    </div>
                    <div class="col-lg-4">
                        <h4 class="mt-4">Appointment Status</h4>
                        <p class="text-18-black">{{ $appointment->status }}</p>
                    </div>
                    @if($appointment->status == "Cancelled")
                    <div class="col-lg-4">
                        <h4 class="mt-4">Cancel Reason</h4>
                        <p class="text-18-black">{{ $appointment->cancel_reason }}</p>
                    </div>
                    @endif
                </div>
            </div>
        </div>
    </section>
</div>

@endsection