@extends('layouts.master')

@section('title', 'Invoice Search | Proxima - Medical Management app')

@section('title-topbar', 'Search')

<!-- css insert -->
@section('css')

<!-- select 2 -->
<link href="https://fastly.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />

<!-- tables -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.0.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/1.11.2/css/dataTables.bootstrap5.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/buttons/2.0.1/css/buttons.bootstrap5.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/autofill/2.3.9/css/autoFill.bootstrap5.min.css">

<!-- datepicker time and date -->
<link rel="stylesheet" href="https://fastly.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">
<link rel="stylesheet" href="https://fastly.jsdelivr.net/npm/flatpickr@4.6.13/dist/plugins/monthSelect/style.min.css">

@endsection


@section('fixedcontent')

<!-- session successful message -->
@if (Session::has('success'))
<div id="flash-msg" class="shadow pt-3">
    <div class="d-flex justify-content-between mb-2">
        <i class="fas fs-1 fa-check"></i>
        <a id="flash-msg-btn" class="text-blue-300 clickable-item-pointer"><i class="fas fa-times"></i></a>
    </div>
    <h3>Sent Successfully</h3>
    <p class="text-blue-300">{{ Session::get('success') }}</p>
</div>
@endif

@endsection

<!-- content insert -->
@section('content')
<div class="container-fluid px-2 mt-3">

    <!-- page title link -->
    <div class="d-sm-flex align-items-center justify-content-between mb-0">
        <span class="mb-0">
            <a class="link-cust-text text-gray-200 fw-light" href="{{ route('sett.home') }}">{{ __('basic.dashboard') }}
                |</a>
            <a class="text-gray-300">{{ __('patientappo.patient search') }}</a>
        </span>

        <div class="mt-2 mt-md-0 text-center">

            <a href="{{ route('sett.invo_allstatcs') }}"
                class="bg-white btn btn-sm shadow-sm b-r-l-cont p-2 px-4 text-gray-400 me-1"><i
                    class="fas fa-chart-bar fa-sm text-gray-300 me-1"></i> {{ __('basic.statistics') }}</a>

            <a href="{{ route('sett.patient.create') }}"
                class=" main-color-bg  btn btn-sm shadow-sm b-r-l-cont p-2 px-4 text-blue-200"><i
                    class="fas fa-plus fa-sm text-blue-200 me-1"></i> {{ __('basic.new') }}</a>
        </div>

    </div>


    <div class="row justify-content-center position-relative">
        <div class="col-12 col-md-10 col-lg-8 col-xl-7 text-center">
            <img class="img-fluid p-md-2" width="400px"
                src="{{ URL::asset('img/dashboard/undraw_revenue_re_2bmg.svg') }}" alt="">


            <div class="search-eng-cont search-eng-cont-patient">

                <div class="card card-input shadow mb-4 bg-white "
                    style="box-shadow: -1px 1rem 1rem 7px rgb(58 59 69 / 15%) !important; ">
                    <!-- Card Header - Dropdown -->


                    <form id="myform" method="get" action="{{ route('sett.invo_other_search_store') }}">

                        <!-- Card Body -->
                        <div class="card-body">

                            <div class="row justify-content-center text-start">

                                <div class="col-6">
                                    <div class="row">
                                        <div class="col-12">
                                            <h5 class=" text-gray-500">
                                                Search by many things...
                                            </h5>
                                        </div>

                                        <div class="col-12 mb-2">
                                            <label class="form-label">Date Between
                                                <small>(required)</small></label>
                                            <div class="input-group">
                                                <div class="input-group-prepend">
                                                    <div class="input-group-text"><i
                                                            class="bi bi-calendar2-week-fill"></i>
                                                    </div>
                                                </div>
                                                <input name="date" type="text"
                                                    class="form-control datepicker_time bg-white"
                                                    value="{{ request()->get('date') }}" placeholder="YYYY/MM/DD HM"
                                                    data-enable-time="true" required>

                                            </div>
                                            @error('date')
                                            <span class="error-msg-form">
                                                {{ $message }}
                                            </span>
                                            @enderror
                                        </div>

                                        <div class="col-12 mb-2">
                                            <label class="form-label">{{ __('basic.doctor') }}
                                                <small>({{ __('basic.optional') }})</small></label>
                                            <select
                                                class="js-example-basic-single select2-hidden-accessible @error('doctor') is-invalid @enderror"
                                                id="doctor" name="doctor">
                                                <option value="false">
                                                    Not Select
                                                </option>
                                                @foreach ($doctors as $item)
                                                <option value="{{ $item->id }}">
                                                    {{ $item->name }}
                                                </option>
                                                @endforeach
                                            </select>

                                            <span id="doctor_error" class="error-msg-form"></span>
                                            @error('doctor')
                                            <span class="error-msg-form">
                                                {{ $message }}
                                            </span>
                                            @enderror
                                        </div>

                                        <div class="col-12 mb-2">
                                            <label class="form-label">{{ __('basic.worker') }}
                                                <small>({{ __('basic.optional') }})</small></label>
                                            <select
                                                class="js-example-basic-single select2-hidden-accessible @error('worker') is-invalid @enderror"
                                                id="worker" name="worker">
                                                <option value="false">
                                                    Not Select
                                                </option>
                                                @foreach ($workers as $item)
                                                <option value="{{ $item->id }}">
                                                    {{ $item->name }}
                                                </option>
                                                @endforeach
                                            </select>

                                            <span id="worker_error" class="error-msg-form"></span>
                                            @error('worker')
                                            <span class="error-msg-form">
                                                {{ $message }}
                                            </span>
                                            @enderror
                                        </div>

                                        <div class="col-12 mb-2">
                                            <label class="form-label">{{ __('basic.method') }}
                                                <small>({{ __('basic.optional') }})</small></label>
                                            <select
                                                class="js-example-basic-single select2-hidden-accessible @error('method') is-invalid @enderror"
                                                id="method" name="method">
                                                <option value="all">
                                                    All
                                                </option>
                                                <option value="1">
                                                    Cash
                                                </option>
                                                <option value="2">
                                                    Visa
                                                </option>
                                            </select>

                                            <span id="method_error" class="error-msg-form"></span>
                                            @error('method')
                                            <span class="error-msg-form">
                                                {{ $message }}
                                            </span>
                                            @enderror
                                        </div>
                                        <div class="col-12 mb-2">
                                            <label class="form-label">{{ __('basic.category') }}
                                                <small>({{ __('basic.optional') }})</small></label>
                                            <select
                                            multiple class="js-example-basic-single  select2-hidden-accessible @error('service') is-invalid @enderror"
                                                id="service_cats" name="service_cats[]">

                                                @foreach ($service_cats as $item)
                                                <option value="{{ $item->id }}">
                                                    {{ $item->name }}
                                                </option>
                                                @endforeach
                                            </select>

                                            <span id="service_cats_error" class="error-msg-form"></span>
                                            @error('service_cats')
                                            <span class="error-msg-form">
                                                {{ $message }}
                                            </span>
                                            @enderror
                                        </div>
                                        <div class="col-12 mb-2">
                                            <label class="form-label">{{ __('basic.services') }}
                                                <small>({{ __('basic.required') }})</small></label>
                                            <select
                                            multiple class="js-example-basic-single  select2-hidden-accessible @error('service') is-invalid @enderror"
                                                id="service" name="service[]">
                                                <option value="all">
                                                    All Services
                                                </option>
                                                @foreach ($services as $item)
                                                <option value="{{ $item->id }}">
                                                    {{ $item->name }}
                                                </option>
                                                @endforeach
                                            </select>

                                            <span id="service_error" class="error-msg-form"></span>
                                            @error('service')
                                            <span class="error-msg-form">
                                                {{ $message }}
                                            </span>
                                            @enderror
                                        </div>


                                        <div class="col-12 mb-2">
                                            <label class="form-label">{{ __('basic.branch') }}
                                                <small>({{ __('basic.required') }})</small></label>
                                            <select
                                                class="js-example-basic-single select2-hidden-accessible @error('branch') is-invalid @enderror"
                                                id="branch" name="branch">
                                                <option value="all">
                                                    All Branches
                                                </option>
                                                @foreach ($branches as $item)
                                                <option value="{{ $item->id }}">
                                                    {{ $item->name }}
                                                </option>
                                                @endforeach
                                            </select>

                                            <span id="branch_error" class="error-msg-form"></span>
                                            @error('branch')
                                            <span class="error-msg-form">
                                                {{ $message }}
                                            </span>
                                            @enderror
                                        </div>

                                        <div class="d-flex justify-content-center align-items-center mt-3">

                                            <button type="submit" class="btn btn-primary px-4"><i
                                                    class="fas fa-search"></i> {{
                                                __('basic.search') }}</button>
                                        </div>
                                    </div>
                                </div>

                            </div>

                        </div>

                    </form>

                </div>


            </div>

        </div>
    </div>

</div>
@endsection

<!-- js insert -->
@section('js')


<!-- select 2 -->
<script src="https://fastly.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
<script>
    $(document).ready(function() {
            $('.js-example-basic-single').select2();
            //hide search
            $('.select2-no-search').select2({
                minimumResultsForSearch: -1
            });
        });
</script>

<!-- -- datatables plugin -- -->
<script type="text/javascript" src="https://cdn.datatables.net/1.11.3/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.11.3/js/dataTables.bootstrap5.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/buttons/2.0.1/js/dataTables.buttons.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/buttons/2.0.1/js/buttons.bootstrap5.min.js"></script>

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/pdfmake.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/vfs_fonts.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/buttons/2.0.1/js/buttons.html5.min.js"></script>

<script type="text/javascript" language="javascript"
    src="https://cdn.datatables.net/buttons/2.0.1/js/buttons.print.min.js"></script>

<script type="text/javascript" language="javascript"
    src="https://cdn.datatables.net/buttons/2.0.1/js/buttons.colVis.min.js"></script>

<script>
    $(document).ready(function() {

            var table = $('#table-lab').DataTable({
                    lengthChange: false,
                    "order": [
                        [4, "ASC"]
                    ],
                    buttons: {
                        dom: {
                            button: {
                                className: 'btn btn-table-export me-0' //Primary class for all buttons
                            }
                        },
                        buttons: ['copy', 'excel', 'pdf']
                    }
                }

            );
            table.buttons().container()
                .appendTo('#table-lab_wrapper .col-md-6:eq(0)');

        });
</script>

<!-- datapicker date and time -->
<script src="https://fastly.jsdelivr.net/npm/flatpickr"></script>
<script src="https://fastly.jsdelivr.net/npm/flatpickr@4.6.13/dist/plugins/monthSelect/index.min.js"></script>

<script>
    $(document).ready(function() {


        //-------- datepicker time --------
        $('.datepicker_time').flatpickr({
            enableTime: true,
            mode: "range",
            locale: {
                rangeSeparator: 'to'
            },
            plugins: [
                new monthSelectPlugin({
                    shorthand: true, //defaults to false
                    dateFormat: "m-Y", //defaults to "F Y"
                    altFormat: "F Y", //defaults to "F Y"
                    theme: "dark", // defaults to "light"
                })
            ]
        });

    })
</script>
<script>
     $('#service_cats').on('change', async function(e) {
        e.preventDefault();
        var service_cats = $(this).val();
        console.log(service_cats);
        if (service_cats.length >0) {
            let services = await fetch_services(service_cats);
            $('#service').empty();
            $.each(services, function(key, value) {
                $('#service').append('<option value="' +
                 value.id + '">' + value.name + '</option>');
            });
        }
        else{
            $('#service').empty();
            var services = {!! json_encode($services) !!};
            $('#service').append('<option value="all" > All Services </option>');
            $.each(services, function(key, value) {
                $('#service').append('<option value="' +
                 value.id + '">' + value.name + '</option>');
            });
        }


    });

    async function fetch_services(servicesCatID) {
        let url = "{{ route('sett.app_fetch_services_ajax') }}";
                try {
                    const response = await $.ajax({
                    url
                    , type: "POST"
                    ,data: {
                            '_token': "{{ csrf_token() }}",
                            'servicesCatID': servicesCatID,
                        }
                    });
                    return response;

                } catch (error) {
                    console.error("Error occurred:", error);
                    throw error;
                }
    }
    //

</script>

@endsection