@extends('frontend_eng.layouts.app')
@section('title', 'Doctors')
@section('meta', 'Welcome to Om Hospital and Research Center PVt. Ltd.')
@section('content')
    <!-- BREADCRUMB
       ============================================= -->
    <div id="breadcrumb" class="division">
        <div class="container">
            <div class="row">
                <div class="col">
                    <div class=" breadcrumb-holder">
                        <h4 class="h4-sm text-white">Doctor's Profile</h4>
                        <!-- Breadcrumb Nav -->
                        <nav aria-label="breadcrumb">
                            <ol class="breadcrumb">
                                <li class="breadcrumb-item"><a href="{{route('homepage')}}" class="text-white">Home</a></li>
                                <li class="breadcrumb-item active text-white" aria-current="page">Doctor</li>
                            </ol>
                        </nav>
                    </div>
                    <!-- Title -->
                </div>
            </div>
        </div> <!-- End row -->
    </div> <!-- End container -->
    <div class="slider-overlay"></div>

    <!-- ======= Doctor Section ======= -->
    <section>
        <div class="container">
            <div class="row">
                <div class="col-lg-4 col-md-5">
                    <div class="team_single radius_all_10 box_shadow1">
                        <div class="team_img">
                            <img class="radius_ltrt_10" src="{{$doctor->image ? asset($doctor->image_path) : asset('assets/images/omhospital/favicon.png')}}" alt="team_img_big"
                                width="100%">
                        </div>
                        <div class="team_single_info py-3">
                            <div class="team_name">
                                <h5 class="">{{ $doctor->name }}</h5>
                                <span>{{ $doctor->designation }}</span>
                            </div>
                            {{-- <h6 class="my-3">Contact info:</h6>
                            <ul class="contact_info list_none p-0">
                                <li>
                                    <span>Address:</span>
                                    <address>{{ $doctor->address ? $doctor->address : '-' }}</address>
                                </li>
                                <li>
                                    <span>Email:</span>
                                    <a
                                        href="mailto:{{ $doctor->email ? $doctor->email : '#' }}">{{ $doctor->email ? $doctor->email : '-' }}</a>
                                </li>
                                <li>
                                    <span>Phone:</span>
                                    <a
                                        href="tel:{{ $doctor->phone ? $doctor->phone : '#' }}">{{ $doctor->phone ? $doctor->phone : '-' }}</a>
                                </li>
                                <li>
                                    <span>Social:</span>
                                    <ul class="list_none social_icons doctor_profile_social d-flex p-0">
                                        <li><a href="{{ $doctor->facebook ? $doctor->facebook : '#' }}" class="sc_facebook"
                                                target="_blank"><i class="fab fa-facebook-square"></i></a></li>
                                        <li><a href="{{ $doctor->twitter ? $doctor->twitter : '#' }}" class="sc_twitter"
                                                target="_blank"><i class="fab fa-twitter"></i></a>
                                        </li>
                                        <li><a href="{{ $doctor->linkedin ? $doctor->linkedin : '#' }}" class="sc_gplus"
                                                target="_blank"><i class="fab fa-linkedin"></i></a>
                                        </li>
                                        <li><a href="{{ $doctor->instagram ? $doctor->instagram : '#' }}"
                                                class="sc_instagram" target="_blank"><i class="fab fa-instagram"></i></a>
                                        </li>
                                    </ul>
                                </li>
                            </ul> --}}
                            @if ($doctor->schedules)
                                <hr>
                                <h6 class="mb-3">Schedule</h6>
                                <div class="table table-responsive">
                                    <table class="table table-bordered table-hover">
                                        <thead>
                                            <tr>
                                                <th>Days</th>
                                                <th>Time</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            @foreach ($doctor->schedules as $schedule)
                                                <tr @if(Carbon\Carbon::parse()->now()->format('l') == $schedule->day) style="background-color:yellow" @endif>
                                                    <td>{{ $schedule->day }}</td>
                                                    <td>{{ $schedule->time }}</td>
                                                </tr>
                                            @endforeach
                                        </tbody>
                                    </table>
                                </div>
                            @endif
                            <button type="button" class="btn btn-primary" data-toggle="modal"
                                data-target="#appointmentModal" data-id="{{$doctor->id}}">
                                Book Appointment
                            </button>
                        </div>
                    </div>
                </div>
                <!-- MODAL START -->
                <div class="modal fade" id="appointmentModal" tabindex="-1" aria-labelledby="appointmentModalLabel"
                    aria-hidden="true">
                    <div class="modal-dialog">
                        <div class="modal-content">
                            <div class="modal-header">
                                <h5 class="modal-title" id="appointmentModalLabel">Book your appointment with
                                    {{ $doctor->name }}</h5>
                                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                    <span aria-hidden="true">&times;</span>
                                </button>
                            </div>
                            <div class="modal-body">
                                <form action="" id="appointmentForm">
                                    <div class="row">
                                        <div class="form-group col-lg-12 col-md-12 col-12 p-2">\
                                            <input type="hidden" class="form-control" id="doctor_id" value="{{$doctor->id}}">
                                            <label for="fullname" class="form-label p-0">Full Name <span
                                                    class="text text-danger">*</span></label>
                                            <input type="text" class="form-control" id="fullname" name="full_name" value="">
                                            <span class="text text-danger" id="fullname_error"></span>

                                        </div>
                                        <div class="form-group col-lg-12 col-md-12 col-12 p-2">
                                            <label for="fullname" class="form-label p-0">Email<span
                                                    class="text text-danger">*</span></label>
                                            <input type="email" class="form-control" id="email" name="email" value="">
                                            <span class="text text-danger" id="email_error"></span>

                                        </div>
                                        <div class="form-group col-lg-12 col-md-12 col-12 p-2">
                                            <label for="fullname" class="form-label p-0">Contact No.<span
                                                    class="text text-danger">*</span></label>
                                            <input type="tel" class="form-control" id="contact" name="contact" value="">
                                            <span class="text text-danger" id="contact_error"></span>

                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="form-group col-lg-6 col-md-6 col-12 p-2">
                                            <label for="gender">Gender <span class="text text-danger">*</span></label>
                                            <select name="gender" id="gender" class="form-control">
                                                <option value="" selected disabled>Select Gender</option>
                                                <option value="Male">Male</option>
                                                <option value="Female">Female</option>
                                            </select>
                                            <span class="text text-danger" id="gender_error"></span>

                                        </div>
                                        <div class="form-group col-lg-6 col-md-6 col-12 p-2">
                                            <label for="gender">Age <span class="text text-danger">*</span></label>
                                            <input type="number" class="form-control" id="age" name="age" min="1"
                                                value="">
                                                <span class="text text-danger" id="age_error"></span>
                                        </div>
                                        <div class="form-group col-lg-6 col-md-6 col-12 p-2">
                                            <label for="fullname" class="form-label p-0">Appointment Date</label>
                                            <input type="date" class="form-control" id="appointment_date" name="appointment_date" value="">

                                        </div>

                                        <div class="form-group col-lg-12 col-md-12 col-12 p-2">
                                            {!! NoCaptcha::renderJs() !!}
                                            {!! NoCaptcha::display() !!}
                                            <span class="text text-danger" id="g-recaptcha_error"></span>
                                        </div>
                                    </div>
                                </form>
                                <div class="message" id="success_message" style="display: none;">
                                    <div class="alert alert-success p-3">
                                        <p>You request has been submitted successfully! We'll be contacting you soon.</p>
                                    </div>
                                </div>
                            </div>
                            <div class="modal-footer">
                                <button type="button" class="btn btn-primary submitAppointmentBtn">Submit</button>
                                <button type="close" class="btn btn-danger" data-dismiss="modal">Close</button>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- MODAL END -->
                <div class="col-lg-8 col-md-7">
                    <div class="teacher_desc mt-4 mt-md-0">
                        <h4 class="mb-3">Professional Journey</h4>
                    </div>
                    <div id="accordion" class="professional_journey">
                        <div class="card">
                            <div class="card-header" id="headingOne">
                                <h5 class="mb-0">
                                    <a class="btn btn-link" data-toggle="collapse" data-target="#collapseOne"
                                        aria-expanded="true" aria-controls="collapseOne">
                                        Education
                                    </a>
                                </h5>
                            </div>

                            <div id="collapseOne" class="collapse show" aria-labelledby="headingOne"
                                data-parent="#accordion">
                                <div class="card-body">
                                    {!! $doctor->detail ? $doctor->detail->education : '' !!}
                                </div>
                            </div>
                        </div>
                        <div class="card">
                            <div class="card-header" id="headingTwo">
                                <h5 class="mb-0">
                                    <a class="btn btn-link" data-toggle="collapse" data-target="#collapseTwo"
                                        aria-expanded="false" aria-controls="collapseTwo">
                                        Experience
                                    </a>
                                </h5>
                            </div>
                            <div id="collapseTwo" class="collapse show" aria-labelledby="headingTwo"
                                data-parent="#accordion">
                                <div class="card-body">
                                    {!! $doctor->detail ? $doctor->detail->experience : '' !!} </div>
                            </div>
                        </div>
                        <div class="card">
                            <div class="card-header" id="headingThree">
                                <h5 class="mb-0">
                                    <a class="btn btn-link" data-toggle="collapse" data-target="#collapseThree"
                                        aria-expanded="false" aria-controls="collapseThree">
                                        Achievements
                                    </a>
                                </h5>
                            </div>
                            <div id="collapseThree" class="collapse show" aria-labelledby="headingThree"
                                data-parent="#accordion">
                                <div class="card-body">
                                    {!! $doctor->detail ? $doctor->detail->accomplishment : '' !!} </div>
                            </div>
                        </div>
                        @if($publications->isNotEmpty())
                        <div class="card">
                            <div class="card-header" id="headingFour">
                                <h5 class="mb-0">
                                    <a class="btn btn-link" data-toggle="collapse" data-target="#collapseFour"
                                        aria-expanded="false" aria-controls="collapseFour">
                                        Publications
                                    </a>
                                </h5>
                            </div>
                            <div id="collapseFour" class="collapse show" aria-labelledby="headingFour"
                                data-parent="#accordion">
                                <div class="card-body">
                                    <div class="table-responsive">
                                        <table class="table-bordered table-hover" width="100%">
                                            <thead>
                                                <tr>
                                                    <th width="5%">#</th>
                                                    <th width="70%" class="text-center">Title</th>
                                                    <th> </th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                @foreach ($publications as $key => $publication)
                                                    <tr>
                                                        <td class="p-2">{{++$key}}</td>
                                                        <td class="p-2">{{$publication->title}}</td>
                                                        <td class="p-2"><a href="{{asset('uploads/doctor/publications')}}/{{$publication->file}}" target="_blank" class="btn btn-primary p-2" style="font-size: 14px;">View Article</a></td>
                                                    </tr>
                                                @endforeach
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                            </div>
                        </div>
                        @endif
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!-- End Contact Section -->

@endsection
@push('script')
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.5/jquery.validate.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.5/additional-methods.min.js"></script>
    <script>
        $(document).ready(function(){
            $('#appointmentForm').validate();
            let doctor_id = '';
            $('.doctorAppointmentBtn').on('click',function(e){
                e.preventDefault();
                $('#appointmentModal').modal('show');
            });
            $('.submitAppointmentBtn').on('click',function(e){
                e.preventDefault();
                let doctor = $('#doctor_id').val();
                // console.log(doctor);
                let name = $('#fullname').val();
                let email = $('#email').val();
                let contact = $('#contact').val();
                let gender = $('#gender').val();
                let age = $('#age').val();
                let appointment_date = $('#appointment_date').val();
                // console.log(doctor,name,email,contact,gender,age,appointment_date);

                $.ajax({
                    type: "POST",
                    url: "{{route('doctor.book_appointment')}}",
                    data:{
                        doctor_id:doctor,
                        fullname:name,
                        email:email,
                        phone:contact,
                        gender:gender,
                        age:age,
                        preferred_date:appointment_date,
                        _token:"{{csrf_token()}}",
                    },
                    dataType:"json",
                    success:function(response){
                        if ($.isEmptyObject(response.error)) {
                            // $('#appointmentModal').modal('hide');
                            // $('#message').html(`<div class="alert alert-success">${response.message}</div>`);
                            setTimeout(function(){
                                $('#success_message').show();
                            },500);
                        } else {
                            // console.log(response.error.fullname);
                            $('#fullname_error').html(' ');
                            $('#fullname_error').append(`${response.error.fullname}`);
                            $('#gender_error').html(' ');
                            $('#gender_error').append(`${response.error.gender}`);
                            $('#age_error').html(' ');
                            $('#age_error').append(`${response.error.age}`);
                            $('#email_error').html(' ');
                            $('#email_error').append(`${response.error.email}`);
                            $('#contact_error').html(' ');
                            $('#contact_error').append(`${response.error.phone}`);
                        }

                    }
                });
            });
        });
    </script>
@endpush