@extends('operations.layout.mainlayout')

@section('content')
    {{--    @if (session('role') == 15) --}}
    {{--        {{exit("<h1>Unauthorized access</h1>")}} --}}
    {{--    @endif --}}
    <style>
        .comment-success {
            font-size: 20px;
            background: transparent;
            border: none;
            color: green;
        }

        .comment-success:hover,
        .comment-success:active,
        .comment-success:focus {
            outline: none;
            color: green;
            border: none;
            background: transparent;
        }

        .filter {
            width: 500px !important;
        }

        .inputs.radios label {
            border: 1px solid #DADADA;
            border-radius: 2rem;
            padding: .5rem 2.5rem;
            color: #242D3C;
        }

        .inputs.radios label:not(:last-of-type) {
            margin-right: .5rem;
        }

        .inputs.radios input[type="radio"] {
            display: none;
        }

        .inputs.radios label:hover {
            border-color: var(--blazma-primary);
        }

        .inputs.radios input[type="radio"]:checked+label {
            background: linear-gradient(140.37deg, var(--blazma-pastel) -59.16%, var(--blazma-primary) 49.95%);
            color: #FFF;
            border-color: transparent;
        }
    </style>
    <link href="/css/operations.css?v={{ filemtime(public_path('css/operations.css')) }}" rel="stylesheet">
    <!-- Content Wrapper. Contains page content -->
    <div class="content-wrapper">
        <!-- Content Header (Page header) -->
        <div class="content-header p-0">
            <div class="container-fluid card m-0">
                <div class="row">
                    <div class="col-sm-6 m-0 card ">
                        <h1 class="card-body m-0 text-dark" style="color: var(--blazma-text)!important;">Visits List</h1>
                    </div><!-- /.col -->
                    <div class="col-sm-6">

                    </div><!-- /.col -->
                </div><!-- /.row -->
            </div><!-- /.container-fluid -->
        </div>
        <!-- /.content-header -->

        <!-- Main content -->
        <section class="content">
            <div class="container-fluid">
                <div class="row">
                    <div class="col-12">

                        <!-- /.card -->
                        <div class="card bg-light mr-0">
                            <div class="card-body">
                                <div class="row d-flex justify-content-between contain-filters">
                                    <div class="container-fluid">
                                        <form method="POST">
                                            <div class="row">
                                                <!-- Patient Information -->
                                                <div class="filter mr-4">
                                                    <div class="mb-3">
                                                        <span class="filter-name">VISIT LIST</span>
                                                    </div>
                                                    <div class="form-group">
                                                        <input type="text" name="visit_id" class="form-control"
                                                            placeholder="Visit ID">
                                                    </div>
                                                    <div class="form-group">
                                                        <input type="text" name="file_no" class="form-control"
                                                            placeholder="File No">
                                                    </div>
                                                    <div class="form-group">
                                                        <select name="type_of_visit" class="form-control">
                                                            <option value="" selected>Visit Type</option>
                                                            @foreach ($typeOfVisits as $key => $item)
                                                                <option value="{{ $key }}">{{ $item }}</option>
                                                            @endforeach
                                                        </select>
                                                    </div>
                                                    <div class="form-group">
                                                        <input id="visit-list-date-from" class="form-control"  type="text" placeholder="Date From">
                                                    </div>
                                                    <div class="form-group">
                                                        <input id="visit-list-date-to" class="form-control"  type="text" placeholder="Date To">
                                                    </div>
                                                </div>

                                                <!-- Visit Information -->
                                                <div class="filter mr-4">
                                                    <div class="mb-3">
                                                        <span class="filter-name">PATIENT</span>
                                                    </div>
                                                    <div class="form-group">
                                                        <input type="text" name="patient_id" class="form-control"
                                                            placeholder="ID">
                                                    </div>
                                                </div>

                                                <!-- Type of Condition -->
                                                <div class="filter mr-4">
                                                    <div class="mb-3">
                                                        <span class="filter-name">REGION/HOSPITAL</span>
                                                    </div>
                                                    <div class="form-group">
                                                        <select id="region" name="region_id" class="form-control" required>
                                                            <option value="" selected>Select a region*</option>
                                                            
                                                            @if ($viewAllClusters)
                                                                @foreach ($clusters as $cluster)
                                                                    <option value="{{ $cluster->ID }}">{{ $cluster->NAME }}</option>
                                                                @endforeach
                                                            @elseif ($cluster)
                                                                <option value="{{ $cluster->ID }}">{{ $cluster->NAME }}</option>
                                                            @endif
                                                        </select>
                                                    </div>                                                    
                                                    <div class="form-group">
                                                        <select id="hospital" name="hospital_id" class="form-control" required>
                                                            <option value="" selected>Select a Center/Hospital*</option>
                                                            
                                                            @if ($viewAllClusters)
                                                                @foreach ($hospitals as $hospital)
                                                                    <option value="{{ $hospital->ID }}">{{ $hospital->NAME_EN }}</option>
                                                                @endforeach
                                                            @elseif ($hospital)
                                                                <option value="{{ $hospital->ID }}">{{ $hospital->NAME_EN }}</option>
                                                            @endif
                                                        </select>
                                                    </div>
                                                </div>
                                            </div>
                                        </form>
                                    </div>
                                </div>
                            </div>
                        </div>


                        <div class="card">
                            <div class="card-body pt-0">
                                <table id="diabetic-table" class="table table-bordered table-striped">
                                    <thead>
                                        <tr>
                                            <th>Visit No.</th>
                                            <th>Patient ID</th>
                                            <th>Visit Type</th>
                                            <th>Region</th>
                                            <th>Hospital Name</th>
                                            <th>Visit Date</th>
                                            <th>Registered At</th>
                                        </tr>
                                    </thead>
                                    <tbody></tbody>
                                </table>                                
                            </div>

                        </div>


                        <!-- /.card -->
                    </div>
                    <!-- /.col -->
                </div>
                <!-- /.row -->
            </div>
            <!-- /.container-fluid -->
        </section>
        <!-- /.content -->
    </div>
    <!-- /.content-wrapper -->
@endsection

@section('footer-scripts')
    <script>
        $('#visit-list-date-from').daterangepicker({
            singleDatePicker: true,
            timePicker: true,
            timePicker24Hour: true,
            autoUpdateInput: false,
            locale: {
                format: 'YYYY-MM-DD HH:mm'
            },
        }, function(chosen_date) {
            $('#visit-list-date-from').val(chosen_date.format('YYYY-MM-DD HH:mm')).trigger("change");
        })

        $('#visit-list-date-to').daterangepicker({
            singleDatePicker: true,
            timePicker: true,
            timePicker24Hour: true,
            autoUpdateInput: false,
            locale: {
                format: 'YYYY-MM-DD HH:mm'
            },
        }, function(chosen_date) {
            $('#visit-list-date-to').val(chosen_date.format('YYYY-MM-DD HH:mm')).trigger("change");
        })

        $(document).ready(function () {
            const table = $('#diabetic-table').DataTable({
                processing: true,
                serverSide: true,
                ajax: {
                    url: '/operations/diabetic/get-visits',
                    type: 'POST',
                    data: function (d) {
                        d.file_no = $('input[name="file_no"]').val();
                        d.type_of_visit = $('select[name="type_of_visit"]').val();
                        d.region_id = $('#region').val();
                        d.hospital_id = $('#hospital').val();
                        d.visit_list_date_from = $('#visit-list-date-from').val();
                        d.visit_list_date_to = $('#visit-list-date-to').val();
                        d.patient_id = $('input[name="patient_id"]').val();
                        d.visit_id = $('input[name="visit_id"]').val();
                    }
                },
                columns: [
                    {
                        data: 'visit_no',
                        name: 'visit_no',
                        title: 'Visit No.',
                        render: function (data, type, row) {
                            if (type === 'display') {
                                return `<a href="/operations/diabetic/edit-patient/${row.visit_no}" class="text-primary">${data}</a>`;
                            }
                            return data;
                        }
                    },
                    { data: 'patient_id', name: 'patient_id', title: 'Patient ID' },
                    { data: 'type_of_visit_id', name: 'type_of_visit_id', title: 'Visit Type' },
                    { data: 'region_id', name: 'region_id', title: 'Region' },
                    { data: 'hospital_id', name: 'hospital_id', title: 'Hospital Name' },
                    { data: 'visit_date', name: 'visit_date', title: 'Visit Date' },
                    { data: 'registered_at', name: 'registered_at', title: 'Registered At' }
                ]
            });

            // Refresh table on filter change
            $('.form-control').on('change', function () {
                table.ajax.reload();
            });
        });


    </script>
@endsection