@extends('User/layout/app')
@section('content')
    <div class="container-fluid">
        <!--  Row 1 -->
        <div class="row justify-content-end mb-4">
            <div class="col-lg-auto  col-md-6 col-sm-6">
                <select class="form-select js-example-basic-single" aria-label="Default select example" id="selectUser"
                    name="selectUser">
                    <option value="" selected Default>Select User</option>
                    @foreach ($users as $user)
                        <option value="{{ $user->position_code }}">{{ $user->employee_name }}</option>
                    @endforeach
                </select>
            </div>

            <div class="col-lg-auto  col-md-6 col-sm-auto">
                <div class="d-flex align-items-center">
                    <button type="submit" id="applyfilter"><a href="javascript:void(0)" class="btn btn-primary ms-2"><i
                                class="fa fa-search"></i></a></button>
                    <button type="submit" id="clearfilter"><a href="javascript:void(0)" class="btn btn-danger ms-2"><i
                                class="fa fa-times"></i></a></button>
                </div>
            </div>

        </div>



        <div class="row">
            <div class="col-12">
                <div class="white_table">
                    <table class="table table-striped datatable" style="width:100%">
                        <thead>
                            <tr>
                                <th>Sr No</th>
                                <th>Username</th>
                                <th>Position Code</th>
                                <th>Doctor Name</th>
                                <th>SC Code</th>
                                <th>Speciality</th>
                                <th>State</th>
                                <th>Status</th>
                            </tr>
                        </thead>
                        <tbody>

                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>


    <div class="modal fade" id="enrollDoctorModel" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-lg modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title fs-5" id="enrollDoctorModelLabel">Add New Doctor</h4>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"><i
                            class="fa-solid fa-xmark"></i></button>
                </div>
                {{ Form::open(['url' => '#', 'name' => 'enrolledDoctorForm', 'id' => 'enrolledDoctorForm', 'enctype' => 'multipart/form-data', 'class' => 'pt-0']) }}

                <div class="modal-body">
                    <div class="row">
                        <div class="col-lg-6 col-md-6 col-sm-12 col-12">
                            <div class="mb-3">
                                <label for="doctor_name" class="form-label">Select Doctor <span
                                        class="red_star">*</span></label>
                                <select class="form-select js-example-basic-single only_br"
                                    aria-label="Default select example" id="doctor_name" name="doctor_name">
                                    <option value="" selected Default>Select Doctor</option>
                                    {{-- @foreach ($doctors as $value)
                                        <option value="{{ $value->id }}">{{ $value->doctor_name }}</option>
                                    @endforeach --}}
                                    <option value="NewDoctor">Add Doctor</option>
                                </select>
                                <label id="doctor_name-error" class="error" for="doctor_name"></label>

                            </div>
                        </div>
                        <div class="col-lg-6 col-md-6 col-sm-12 col-12">
                            <div class="mb-3">
                                <label for="doctor" class="form-label">Doctor Name <span class="red_star">*</span></label>
                                <input type="text" class="form-control br_from" placeholder="Doctor Name" readonly
                                    id="doctor" name="doctor">
                            </div>
                        </div>
                        <div class="col-lg-6 col-md-6 col-sm-12 col-12">
                            <div class="mb-3">
                                <label for="sc_code" class="form-label">SC Code <span class="red_star">*</span></label>
                                <input type="text" class="form-control br_from" placeholder="Enter SC Code"
                                    id="sc_code" name="sc_code">
                            </div>
                        </div>
                        <div class="col-lg-6 col-md-6 col-sm-12 col-12">
                            <div class="mb-3">
                                <label for="speciality_name" class="form-label">Speciality <span
                                        class="red_star">*</span></label>
                                <select class="form-select js-example-basic-single only_br"
                                    aria-label="Default select example" id="speciality_name" name="speciality_name">
                                    <option value="" selected Default>Select Speciality</option>
                                    {{-- @foreach ($specialities as $key)
                                        <option value="{{ $key->id }}">{{ $key->speciality_name }}</option>
                                    @endforeach --}}
                                </select>
                                <label id="speciality-error" class="error" for="speciality"></label>

                            </div>
                        </div>

                        <input type="hidden" id="edit_doctor_id" name="edit_doctor_id" readonly>

                        <input type="hidden" id="doctor_id" name="doctor_id" readonly>
                        <input type="hidden" id="speciality" name="speciality" readonly>
                        <div class="col-lg-6 col-md-6 col-sm-12 col-12">
                            <div class="mb-3">
                                <label for="mobile_number" class="form-label">Mobile Number <span
                                        class="red_star">*</span></label>
                                <div class="flag_icon">
                                    <select class="form-select js-example-basic-single only_br"
                                        aria-label="Default select example">
                                        <option selected Default>+ 91</option>
                                        <!-- <option value="1">+ 91</option>
                                                                                                                                                                                                                                                                                                                                                                        <option value="2">+ 92</option>
                                                                                                                                                                                                                                                                                                                                                                        <option value="3">+ 93</option> -->
                                    </select>
                                    <input type="number" class="form-control br_from" id="mobile_number"
                                        name="mobile_number" placeholder="Enter Mobile Number">

                                </div>
                                <label id="mobile_number-error" class="error" for="mobile_number"></label>

                            </div>
                        </div>
                        <div class="col-lg-6 col-md-6 col-sm-12 col-12">
                            <div class="mb-3">
                                <label for="pincode" class="form-label">Pincode <span class="red_star">*</span></label>
                                <input type="number" class="form-control br_from" id="pincode" name="pincode"
                                    placeholder="Enter Pincode Code">
                            </div>
                        </div>
                        <div class="col-lg-6 col-md-6 col-sm-12 col-12">
                            <div class="mb-3">
                                <label for="state" class="form-label">State <span class="red_star">*</span></label>
                                <select class="form-select js-example-basic-single only_br"
                                    aria-label="Default select example" id="state" name="state">
                                    <option value="" selected Default>Select State</option>
                                    {{-- @foreach ($states as $key)
                                        <option value="{{ $key->id }}">{{ $key->state_name }}</option>
                                    @endforeach --}}
                                </select>
                                <label id="state-error" class="error" for="state"></label>

                            </div>
                        </div>
                        <div class="col-lg-6 col-md-6 col-sm-12 col-12">
                            <div class="mb-3">
                                <label for="city" class="form-label">City <span class="red_star">*</span></label>
                                <input type="text" class="form-control br_from" id="city" name="city"
                                    placeholder="Enter City">
                                <!--                                 <select class="form-select js-example-basic-single only_br"
                                                                                                                                                                                                                aria-label="Default select example" id="city" name="city">
                                                                                                                                                                                                                <option value="" selected Default>Select City</option>
                                                                                                                                                                                                            </select> -->
                                <label id="city-error" class="error" for="city"></label>
                            </div>
                        </div>
                        <div class="col-lg-6 col-md-6 col-sm-12 col-12">
                            <div class="mb-3">
                                <label for="hospital_name" class="form-label">Hospital Name <span
                                        class="red_star">*</span></label>
                                <input type="text" class="form-control br_from" id="hospital_name"
                                    name="hospital_name" placeholder="Enter Hospital Name">
                            </div>
                        </div>
                        <div class="col-lg-12 text-center">
                            <div class="mb-3">
                                <button type="submit" id="enrolledDoctorSubmit"
                                    class=" btn btn-primary mt-4">Submit</button>
                            </div>
                        </div>


                    </div>

                </div>

                {{ Form::close() }}

            </div>
        </div>
    </div>
@endsection


@section('js')
    <script>
        function status(id) {
            $.ajax({
                url: "{{ route('ChangeEnrolledDoctorStatus') }}",
                type: 'POST',
                data: {
                    'id': id,
                    '_token': "{{ csrf_token() }}"
                },
                dataType: "json",
                success: function(response, textStatus, xhr) {
                    if (response.status == 1) {
                        $.notify(response.msg, "success");
                    } else
                        $.notify(response.msg, "error");
                },
                error: function(jqXHR, textStatus, errorThrown) {
                    $.notify(jqXHR.responseJSON.message, "error");
                }
            });
        }


        $(document).ready(function() {
            filterData();

            $('#applyfilter').click(function() {
                filterData();
            });

            $('#clearfilter').click(function() {
                window.location.reload();
            });

            function filterData() {
                var i = 1;
                var table = $('.table').DataTable({
                    scrollX: true,
                    destroy: true,
                    processing: true,
                    serverSide: true,
                    responsive: true,
                    autoWidth: false,
                    language: {
                        searchPlaceholder: "Search"
                    },
                    ajax: {
                        url: "{{ route('ManageDoctorPaginate') }}",
                        data: function(d) {
                            _token: "{{ csrf_token() }}";
                            d.selectUser = $('#selectUser option:selected').val();
                        },
                    },
                    "drawCallback": function(settings) {
                        new VenoBox({
                            selector: ".venobox_img",
                            numeration: true,
                            infinigall: true,
                            share: true,
                            spinner: 'plane'
                        });
                    },
                    columns: [{
                            data: 'DT_RowIndex',
                            name: 'DT_RowIndex',
                            orderable: false,
                            searchable: false
                        },
                        {
                            data: 'employee_name',
                            orderable: false,
                            searchable: false
                        },
                        {
                            data: 'position_code',
                            orderable: false,
                            searchable: true
                        },
                        {
                            data: 'doctor_name',
                            orderable: false,
                            searchable: true
                        },
                        {
                            data: 'sc_code',
                            orderable: false,
                            searchable: true
                        },
                        {
                            data: 'speciality_name',
                            orderable: false,
                            searchable: true
                        },
                        {
                            data: 'state_name',
                            orderable: false,
                            searchable: true
                        },
                        {
                            data: 'doctor_status',
                            orderable: false,
                            searchable: false

                        },
                    ],
                    columnDefs: [{
                        "aTargets": [1, 2, 3, 4, 5, 6, 7],
                        "mRender": function(data, type, full) {
                            if (data != null) {
                                return data;
                            } else {
                                return '-';
                            }
                        },
                    }, ],

                });

            }




            function refreshDataTable() {
                $('.table').DataTable().ajax.reload();
            }
        });
    </script>
@endsection