@extends('operations.layout.mainlayout')

@section('content')
    {{--    @if(session('role') != 4)--}}
    {{--        {{exit("<h1>Unauthorized access</h1>")}}--}}
    {{--    @endif--}}
    <!-- Content Wrapper. Contains page content -->
    <div class="content-wrapper">
        <!-- Content Header (Page header) -->
        <div class="content-header">
            <div class="container-fluid card">
                <div class="row mb-2">
                    <div class="col-sm-6 card-body">
                        <h1 class="m-0 text-dark" style="color: var(--blazma-text)!important;">Unit List</h1>
                    </div><!-- /.col -->
                    <div class="col-sm-6">
                        <ol class="breadcrumb float-sm-right">
                            <li class="breadcrumb-item"><a href="/operations">Home</a></li>
                            <li class="breadcrumb-item active">Unit List</li>
                        </ol>
                    </div><!-- /.col -->
                </div><!-- /.row -->
            </div><!-- /.container-fluid -->
        </div>
        <!-- /.content-header -->
        <div class="modal fade" id="modal-unit-category">
            <div class="modal-dialog modal-lg">
                <div class="modal-content">
                    <div class="modal-header">
                        <h3 class="modal-title">Add Unit Category</h3>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body">

                        <div class="row">
                            <div class="col" style="text-align: center;">
                                <div class="alert alert-danger alert-danger-item" role="alert" style="display: none;"></div>
                            </div>
                        </div>

                        <div class="row" style="margin-top:20px">
                            <div class="col-md-6">
                                <p style="font-size:15px;color:#1F3E61;font-weight: 600;margin-bottom: 10px;">Name En</p>
                                <input required="" type="text" step="0.1" class="form-control" placeholder="Name En" name="name_en" id="name_en">
                            </div>
                            <div class="col-md-6">
                                <p style="font-size:15px;color:#1F3E61;font-weight: 600;margin-bottom: 10px;">Name Ar</p>
                                <input required="" type="text" step="0.1" class="form-control" placeholder="Name Ar" name="name_ar" id="name_ar">
                            </div>
                        </div>

                    </div>
                    <div class="modal-footer justify-content-between">
                        <button style="width:130px;" type="button" class="btn btn-default" data-dismiss="modal">Cancel
                        </button>
                        <button style="width:130px;color:#fff" id="add-new-unit-category" type="button" class="btn btn-info">
                            Save
                        </button>
                    </div>
                </div>
                <!-- /.modal-content -->
            </div>
            <!-- /.modal-dialog -->
        </div>

        <!-- Main content -->
        <section class="content">
            <div class="container-fluid">
                <div class="row">
                    <div class="mx-auto col-md-8">

                        <!-- /.card -->

                        <div class="col-12 col-sm-12 col-md-12">
                            <br />
                            <div class="card bg-light">
                                <div class="card-header text-muted border-bottom-0">
                                </div>
                                <form method="get" action="" style="width:100%;">
                                    <div class="card-body pt-0">
                                        <div class="row">
                                            <div class="col-12">

                                                <div class="row">
                                                    <div class="col-md-6"  @if(empty(session('is_primary')) || !empty(session('org_id')) || session('role') == 17) style="display: none" @endif>
                                                        <span class="text-muted text-sm"><b>Processing Lab</b></span>
                                                        <select class="form-control lu-hospitals" id="lu-hospital-id" name="hospital">
                                                            <option value="">Select Branch</option>
                                                            @foreach($hospitals as $ehospital)
                                                                <option @if((!empty($hospital) && $hospital == $ehospital->ID) || (!empty(session('role'))  && session('role') == 1 && session('hospital_id') == $ehospital->ID)) selected @endif value="{{$ehospital->ID}}">{{$ehospital->NAME_EN}}</option>
                                                            @endforeach
                                                        </select>
                                                    </div>

                                                    <div class="col-md-6">
                                                        <span class="text-muted text-sm"><b>Tests</b></span>
                                                        <select class="form-control lu-tests" id="lu-test-id" name="tests">
                                                        </select>
                                                    </div>

                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </form>
                            </div>
                        </div>


                        <div class="card">

                            <!-- /.card-header -->
                            <div class="card-body">

                                <ul class="nav nav-tabs" id="custom-content-below-tab" role="tablist"
                                    style="margin-bottom: 15px;">
                                    <li class="nav-item">
                                        <a class="nav-link active"
                                           style="color: #007bff !important;"
                                           id="custom-content-below-home-tab" data-toggle="pill"
                                           href="#custom-content-below-home" role="tab"
                                           aria-controls="custom-content-below-home" aria-selected="true">Unit List</a>
                                    </li>
                                    <li class="nav-item">
                                        <a class="nav-link"
                                           style="color: #007bff !important;"
                                           id="custom-content-below-messages-tab" data-toggle="pill"
                                           href="#custom-content-below-messages" role="tab"
                                           aria-controls="custom-content-below-messages" aria-selected="false">Unit Category
                                        </a>
                                    </li>

                                </ul>

                                <div class="tab-content" id="custom-content-below-tabContent">

                                    <div class="tab-pane fade active show" id="custom-content-below-home" role="tabpanel"
                                         aria-labelledby="custom-content-below-home-tab">

                                        <table id="example1" class="table table-bordered table-striped lu-table">
                                            <thead>
                                            <tr>
                                                <th>Unit ID</th>
                                                <th>Unit Name (EN)</th>
                                                <th>Unit Name (AR)</th>
                                                <th>Unit Category</th>
                                                <th>Processing Branch</th>
                                            </tr>
                                            </thead>
                                            <tbody>
                                            @foreach($units as $unit)
                                                <tr>
                                                    <td><a href="/operations/profile-units/{{$unit->ID}}">{{$unit->ID}}</a></td>
                                                    <td>{{$unit->NAME_EN ?? ''}}</td>
                                                    <td>{{$unit->NAME_AR ?? ''}}</td>
                                                    <td>{{$unit->Category->NAME_EN ?? ''}}</td>
                                                    <td>{{$unit->HOSPITAL->NAME_EN ?? ''}}</td>
                                                </tr>
                                            @endforeach
                                            </tbody>
                                        </table>
                                        <div class="row">
                                            <div class="col" style="text-align: center">
                                                @permission('mange_administration_lab_units')
                                                <a class="btn btn-info" href="/operations/profile-units/0">Add Unit </a>
                                                <button type="button" class="btn btn-warning" data-toggle="modal"
                                                        data-target="#modal-sync-all-unit-tests">Sync Tests</button>
                                                @endpermission
                                            </div>
                                        </div>
                                    </div>

                                    <div class="tab-pane fade" id="custom-content-below-messages" role="tabpanel"
                                         aria-labelledby="custom-content-below-messages-tab">

                                        <table id="profile-unit-categories-table" class="table table-bordered table-striped"></table>

                                        <div class="row">
                                            <div class="col" style="text-align: center">
                                                @permission('mange_administration_lab_units')
                                                <button style="color:#fff" data-toggle="modal" data-target="#modal-unit-category" class="btn btn-info">Add Category Unit</button>
                                                @endpermission
                                            </div>
                                        </div>
                                    </div>
                                </div>

                            </div>
                            @permission('mange_administration_lab_units')
                            <div class="modal fade" id="modal-sync-all-unit-tests" tabindex="-1" role="dialog">
                                <div class="modal-dialog" role="document">
                                    <div class="modal-content">
                                        <div class="modal-header">
                                            <h3 class="modal-title">Sync Tests</h3>
                                            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                                <span aria-hidden="true">&times;</span>
                                            </button>
                                        </div>
                                        <div class="modal-body">
                                            <div class="alert alert-danger sync-all-unit-tests-error" style="display:none;"></div>
                                            <div class="alert alert-success sync-all-unit-tests-done" style="display:none;"></div>
                                            <p><b>Warning!</b><br>
                                                All tests currently added to the Lab Units will be removed and
                                                synchronized again based on the Sample Generation Setup.<br>
                                                Are you sure you want to continue?</p>
                                            <p style="direction: rtl; text-align: right;"><b>تحذير !</b><br>
                                                سيتم حذف جميع الفحوصات المضافة حالياً إلى وحدات المختبر، ثم إعادة
                                                مزامنتها مرة أخرى من إعدادات Sample Generation Setup.<br>
                                                هل أنت متأكد من رغبتك في المتابعة؟</p>
                                        </div>
                                        <div class="modal-footer">
                                            <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
                                            <button type="button" class="btn btn-warning" id="confirm-sync-all-unit-tests">Continue</button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            @endpermission

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


@endsection

@section('footer-scripts')
    <script>
        var canManageUnitCategories = false;
        @permission('mange_administration_lab_units')
        canManageUnitCategories = true;
        @endpermission

        function escapeHtml(value) {
            if (value == null) return '';
            return $('<div>').text(String(value)).html();
        }

        $("#profile-unit-categories-table").DataTable({
            "responsive": true,
            "autoWidth": false,
            "searching": true,
            "paging": true,
            "bInfo": false,
            "lengthChange": false,
            "language": {
                "emptyTable": "There are no items added to this package yet"
            },
            serverSide: true,
            "processing": true,
            ajax: '/operations/profile-units/datatables',
            "order": [[0, "desc"]],
            columns: [
                {data: "NAME_EN", title: "Category English Name"},
                {data: "NAME_AR", title: "Category Arabic name"}
            ],
            "rowCallback": function( row, data ) {
                if (canManageUnitCategories) {
                    $('td:eq(0)', row).html(`<a href="#" class="xedit-category-name-en" data-name="NAME_EN" data-pk="${data["ID"]}" data-title="Enter Category English Name">${escapeHtml(data["NAME_EN"])}</a>`);
                    $('td:eq(1)', row).html(`<a href="#" class="xedit-category-name-ar" data-name="NAME_AR" data-pk="${data["ID"]}" data-title="Enter Category Arabic Name">${escapeHtml(data["NAME_AR"])}</a>`);
                } else {
                    $('td:eq(0)', row).text(data["NAME_EN"] ?? '');
                    $('td:eq(1)', row).text(data["NAME_AR"] ?? '');
                }
            },
            "drawCallback": function( settings ) {
                if (canManageUnitCategories) {
                    $(".xedit-category-name-en, .xedit-category-name-ar").editable({
                        type: 'text',
                        url: "/operations/profile-unit-category/name",
                        error: function(jqXHR, newValue) {
                            return jqXHR.responseJSON && jqXHR.responseJSON.errorMessage
                                ? jqXHR.responseJSON.errorMessage
                                : 'Error while saving';
                        }
                    });
                }
            }
        });

        $('#add-new-unit-category').click(function () {
            $(".alert-danger-person").slideUp("slow", function () {
            });
            $('#add-new-unit-category').html('<span class="spinner-border spinner-border-sm mr-2" role="status" aria-hidden="true"></span>Loading...').attr('disabled', true);
            var name_en = $("#name_en").val();
            var name_ar = $("#name_ar").val();

            var data = {
                name_en: name_en,
                name_ar: name_ar,
            }
            $.ajax({
                type: "POST",
                url: "/operations/profile-units-category",
                data: JSON.stringify(data),
                contentType: "application/json; charset=utf-8",
            }).done(function (data) {
                $('#add-new-unit-category').prop("disabled", false);
                $('#profile-unit-categories-table').DataTable().ajax.reload();
                $(".alert-danger-item").html("");
                $(".alert-danger-item").slideUp("slow", function () {
                });
                $('#modal-unit-category').modal('hide');
                $('#add-new-unit-category').html('Save').attr('disabled', false);
            }).fail(function (jqXHR, textStatus, errorThrown) {
                $('#add-new-unit-category').prop("disabled", false);
                $(".alert-danger-item").html(jqXHR.responseJSON.errorMessage);
                $(".alert-danger-item").slideDown("slow", function () {
                });
                $('#add-new-unit-category').html('Save').attr('disabled', false);
            })
            return false;
        });

        $(".lu-hospitals").select2();
        $(".lu-hospitals").on('change',function () {

            var hospital_id=$('#lu-hospital-id').val();
            $("#lu-test-id").empty();
            $.ajax({
                type: "GET",
                url: "/operations/tests/"+hospital_id+"/individual-tests",
                contentType: "application/json; charset=utf-8",
            }).done(function(data, textStatus, xhr ) {
                if(data) {
                    $("#lu-test-id").append('<option selected disabled >Select Test</option>');
                    data.forEach(function(test,index){
                        $("#lu-test-id").append('<option value=' + test.ID + '>' + test.NAME_EN + '</option>');

                    })
                }
            }).fail(function(jqXHR, textStatus, errorThrown) {

            });
        })

        $(".lu-tests").select2();
        $(".lu-tests").on('change',function () {

            var hospital_id=$('#lu-hospital-id').val();
            var test_id=$('#lu-test-id').val();
            $('.lu-table').DataTable().clear().destroy();
            LabUnitsTable(hospital_id,test_id);
        });

        function LabUnitsTable(hospital_id,test_id) {
            $(".lu-table").DataTable({
                "responsive": true,
                "autoWidth": false,
                "searching": false,
                "paging": false,
                "bInfo" : false,
                serverSide: true,
                "processing": true,
                ajax: {
                    url :"/operations/test/"+test_id+"/lab-units",
                    data: function (d) {
                        d.hospital_id = hospital_id
                    }
                },
                "order": [[ 0, "desc" ]],
                columns: [
                    { data: "ID", name: "ID",'render': function(data, type, full, meta){
                            return '<a href="/operations/profile-units/'+full["ID"]+'">'+full["ID"]+'</a>';
                        }
                    },
                    { data: "NAME_EN", name: "NAME_EN" },
                    { data: "NAME_AR", name: "NAME_AR" },
                    { data: "TEST_NAME", name: "TEST_NAME" },
                    { data: "HOSPITAL_NAME", name: "HOSPITAL_NAME" },
                ],

            });
        }

    </script>
@endsection