@extends('operations.layout.mainlayout')

@section('content')
{{--    @if(session('role') != 4 && session('role') != 8)--}}
{{--        {{exit("<h1>Unauthorized access</h1>")}}--}}
{{--    @endif--}}
    @if(!empty($list->PROFILE_ID) && $list->PROFILE_ID != session('profile_id')) {{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;">Price List Details</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">

                        <!-- /.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">Price List Information</a>
                                </li>
                                <li class="nav-item">
                                    <a class="nav-link @if(empty($list->NAME_EN)) disabled @endif" style="color: #007bff !important;@if(empty($list->NAME_EN)) color:#a9a9a9 !important; @endif" id="custom-content-below-profile-tab" data-toggle="pill" href="#custom-content-below-profile" role="tab" aria-controls="custom-content-below-profile" aria-selected="false">Price List Packages</a>
                                </li>
                                <li class="nav-item">
                                    <a class="nav-link @if(empty($list->NAME_EN)) disabled @endif" style="color: #007bff !important;@if(empty($list->NAME_EN)) color:#a9a9a9 !important; @endif" id="custom-content-below-client" data-toggle="pill" href="#custom-content-below-client-tab" role="tab" aria-controls="custom-content-below-client-tab" aria-selected="false">Price List Clients</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">
                                    <form method="post" action="/operations/price-list"  enctype="multipart/form-data">
                                        <input required type="hidden" id="list_id" name="list_id" value="@if(!empty($list->ID)){{$list->ID}}@endif">
                                        <p><b>Name</b></p>
                                        <div class="row">
                                            <div class="col-md-6">
                                                <div class="input-group mb-3">
                                                    <div class="input-group-prepend">
                                                        <span class="input-group-text">EN</span>
                                                    </div>
                                                    <input required type="text" class="form-control" name="name_en" value="@if(!empty($list->NAME_EN)){{$list->NAME_EN}}@endif" />
                                                </div>
                                            </div>
                                            <div class="col-md-6">
                                                <div class="input-group mb-3">
                                                    <div class="input-group-prepend">
                                                        <span class="input-group-text">AR</span>
                                                    </div>
                                                    <input required type="text" class="form-control" name="name_ar" value="@if(!empty($list->NAME_AR)){{$list->NAME_AR}}@endif" />
                                                </div>
                                            </div>
                                        </div>
                                        <div class="row">
                                            <div class="col-md-4">
                                                <p><b>Type</b></p>
                                                <select name="type" class="form-control">
                                                    @foreach($types as $type)
                                                        <option @if(!empty($list->TYPE) && $type == $list->TYPE) selected @endif value="{{$type}}">{{$type}}</option>
                                                    @endforeach
                                                </select><br />
                                            </div>
                                        </div>
                                        @permission('mange_administration_price_list')
                                        <div class="row">
                                            <div class="col" style="text-align: center">
                                                    <input type="submit" class="btn btn-info" value="@if(!empty($list->NAME_EN)) Edit Price List @else Add Price List @endif" />
                                            </div>
                                        </div>
                                        @endpermission
                                    </form>
                                </div>
                                <div class="tab-pane fade" id="custom-content-below-profile" role="tabpanel" aria-labelledby="custom-content-below-profile-tab">
                                    <div class="row">
                                        <div class="col">
                                            <table id="price-test-table" class="table table-bordered table-striped">
                                                <thead>
                                                <tr>
                                                    <th>Package</th>
                                                    <th>Type</th>
                                                    <th>Price</th>
                                                    <th>Old Price</th>
                                                    <th>Cost Price</th>
                                                    <th>QTY Limit (Client)</th>
                                                    <th>Service Type</th>
                                                    <th style="width: 130px;">Action</th>
                                                </tr>
                                                </thead>

                                            </table>
                                        </div>
                                    </div>
                                    @permission('mange_administration_price_list')
                                    <div class="row">
                                        <div class="col" style="text-align: center">
                                            <button style="width:130px;color:#fff" data-toggle="modal" data-target="#modal-lg" id="add-test" class="btn btn-info">Add Package</button>
                                            <button style="color:#fff" data-toggle="modal" data-target="#modal-apply-price-list" id="add-test" class="btn btn-success">Apply Branch Prices</button>
                                            <button style="color:#fff" data-toggle="modal" data-target="#modal-apply-price-list-accounts" id="add-test" class="btn btn-success">Apply Client Prices</button>
                                        </div>
                                    </div>
                                    @endpermission
                                </div>
                                <div class="tab-pane fade" id="custom-content-below-client-tab" role="tabpanel" aria-labelledby="custom-content-below-client-tab">
                                    <div class="row">
                                        <div class="col">
                                            <table id="price-test-clients-table" class="table table-bordered table-striped">
                                                <thead>
                                                <tr>
                                                    <th>Client</th>
                                                    <th>Branch</th>
                                                    <th>Discount Tests %</th>
                                                    <th>Discount Packages %</th>
                                                </tr>
                                                </thead>

                                            </table>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!-- /.card-body -->
                    </div>
                    <!-- /.card -->
                </div>
                <!-- /.col -->
            </div>
            <!-- /.row -->
        </div>
        <!-- /.container-fluid -->
    </section>
    <!-- /.content -->
</div>
<!-- /.content-wrapper -->
    <div class="modal fade" id="modal-lg">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h3 class="modal-title">Add Package</h3>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <form id="collection-form" method="post"  action="/operations/samples/">
                    <div class="modal-body">

                        <div class="row">
                            <div class="col" style="text-align: center;">
                                <div class="alert alert-danger alert-danger-hospital" role="alert" style="display: none;"></div>
                            </div>
                        </div>
                        <div class="row" style="margin-top:20px">
                            <div class="col">
                                <p style="font-size:15px;color:#1F3E61;font-weight: 600;margin-bottom: 10px;">Packages</p>
                                <select  class="form-control rhospital_id" id="hospital-test-id" name="hospital_test_id" >
                                    @foreach($packages as $package)
                                        <option value="{{$package->ID}}" >{{$package->NAME_EN}}</option>
                                    @endforeach
                                </select>
                            </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;">Type</p>
                                <select  class="form-control" id="test-type" name="test_type">
                                    <option value="1" >Normal</option>
                                    <option value="2" >Home Visit</option>
                                </select>
                            </div>
                            <div class="col-md-6">
                                <p style="font-size:15px;color:#1F3E61;font-weight: 600;margin-bottom: 10px;">Price</p>
                                <input style="padding:15px" class="form-control" required step="0.01" type="number" id="test-price" name="test_price" />
                            </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;">Old Price</p>
                                <input style="padding:15px" class="form-control" step="0.01" type="number" id="test-old-price" name="old_price" />
                            </div>
                            <div class="col-md-6">
                                <p style="font-size:15px;color:#1F3E61;font-weight: 600;margin-bottom: 10px;">Cost Price</p>
                                <input style="padding:15px" class="form-control" required step="0.01" value="0" type="number" id="test-cost-price" name="cost_price" />
                            </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;">Quantity Limit</p>
                                <input style="padding:15px" class="form-control"  type="number" id="test-qty-limit" name="qty_limit" />
                            </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-package-price-list"  type="button" class="btn btn-info">Save</button>
                    </div>
                </form>
            </div>
            <!-- /.modal-content -->
        </div>
        <!-- /.modal-dialog -->
    </div>

    <div class="modal fade" id="modal-price-list">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h3 class="modal-title">Price List</h3>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <form id="collection-form" method="post"  action="/operations/samples/">
                    <div class="modal-body">

                        <div class="row">
                            <div class="col" style="text-align: center;">
                                <div class="alert alert-danger alert-danger-price-list" role="alert" style="display: none;"></div>
                            </div>
                        </div>
                        <div class="row" style="margin-top:20px">
                            <div class="col">
                                <table id="account-price-list-table" class="table table-bordered table-striped">
                                    <thead>
                                    <tr>
                                        <th>Package</th>
                                        <th>Service Type</th>
                                        <th>Type</th>
                                        <th>Price</th>
                                    </tr>
                                    </thead>

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

                    </div>
                    <div class="modal-footer justify-content-between">
                        <button style="width:130px;" type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                    </div>
                </form>
            </div>
            <!-- /.modal-content -->
        </div>
        <!-- /.modal-dialog -->
    </div>

<div class="modal fade" id="modal-apply-price-list">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h3 class="modal-title">Apply price</h3>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <form id="collection-form" method="post"  action="/operations/samples/">
                <div class="modal-body">

                    <div class="row">
                        <div class="col" style="text-align: center;">
                            <div class="alert alert-danger alert-danger-hospital" role="alert" style="display: none;"></div>
                        </div>
                    </div>
                    <div class="row" style="margin-top:20px">
                        <div class="col-10">
                            <p style="font-size:15px;color:#1F3E61;font-weight: 600;margin-bottom: 10px;">Hospitals</p>
                            <select  class="form-control" id="hospital-price-list" multiple name="hospital_price_list" >
                                @foreach($hospital_list as $hospital)
                                    <option value="{{$hospital->ID}}" @if($hospital->IS_SELECTED) selected @endif>{{$hospital->NAME_EN}}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col-2 d-flex align-items-end">
                        <div class="custom-control custom-switch">
                                 <input type="checkbox" class="custom-control-input" id="select-hospital-all">
                                 <label class="custom-control-label" for="select-hospital-all"  style="margin-right: 10px;font-weight: 300;"> Select All</label>
                        </div>
                        </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="apply-price-list-btn"  type="button" class="btn btn-info">Save</button>
                </div>
            </form>
        </div>
        <!-- /.modal-content -->
    </div>
    <!-- /.modal-dialog -->
</div>

<div class="modal fade" id="modal-apply-price-list-accounts">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h3 class="modal-title">Apply Client price</h3>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <form id="collection-form" method="post"  action="/operations/samples/">
                <div class="modal-body">

                    <div class="row">
                        <div class="col" style="text-align: center;">
                            <div class="alert alert-danger alert-danger-hospital" role="alert" style="display: none;"></div>
                        </div>
                    </div>
                    <div class="row" style="margin-top:20px">
                        <div class="col-12">
                            <p style="font-size:15px;color:#1F3E61;font-weight: 600;margin-bottom: 10px;">Contract Type</p>
                            <select class="form-control" id="account-contract-type-filter" name="account_contract_type_filter">
                                <option value="">All Contract Types</option>
                                @foreach($contractTypes as $contractType)
                                    <option value="{{$contractType->ID}}">{{$contractType->NAME}}-{{$contractType->CODE}}</option>
                                @endforeach
                            </select>
                        </div>
                    </div>
                    <div class="row" style="margin-top:20px">
                        <div class="col-10">
                            <p style="font-size:15px;color:#1F3E61;font-weight: 600;margin-bottom: 10px;">Client</p>
                            <select  class="form-control" id="account-price-list" multiple name="hospital_price_list" >
                                @foreach($accounts_list as $user)
                                    <option class="account-option" value="{{$user->ID}}" @if($user->IS_SELECTED) selected @endif hospital_id="{{$user->HOSPITAL_ID}}" data-contract-type-id="{{$user->CONTRACT_TYPE_ID}}">{{$user->FULL_NAME}}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col-2 d-flex align-items-end">
                        <div class="custom-control custom-switch">
                                 <input type="checkbox" class="custom-control-input" id="select-account-all">
                                 <label class="custom-control-label" for="select-account-all"  style="margin-right: 10px;font-weight: 300;"> Select All</label>
                        </div>
                        </div>

                    </div>
                    <div class="row" style="margin-top:20px">
                        <div class="col-md-12">
                            <div class="custom-control custom-switch">
                                <input type="checkbox" class="custom-control-input" name="approval-only-positive" value="positive" id="is-exclude-service">
                                <label class="custom-control-label" for="is-exclude-service" style="margin-right: 10px;font-weight: 300;">Apply the price list on the excluded Service</label>
                            </div>
                        </div>
                        <div class="col-md-12">
                            <div class="custom-control custom-switch">
                                <input type="checkbox" class="custom-control-input"  id="is-only-cost">
                                <label class="custom-control-label" for="is-only-cost" style="margin-right: 10px;font-weight: 300;">Apply only price cost</label>
                            </div>
                        </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="apply-account-price-list-btn"  type="button" class="btn btn-info">Save</button>
                </div>
            </form>
        </div>
        <!-- /.modal-content -->
    </div>
    <!-- /.modal-dialog -->
</div>
@endsection

@section('footer-scripts')
    <script>
    // Picks every client on the chosen contract type, the same shortcut the
    // client group dropdown gives on the test and package screens.
    $(document).on("change", "#account-contract-type-filter", function () {
        var contractTypeId = $(this).val();
        $("#account-price-list > .account-option").prop("selected", "");
        if (contractTypeId) {
            $("#account-price-list > .account-option[data-contract-type-id='" + contractTypeId + "']").prop("selected", "selected");
        }
        $("#account-price-list").trigger("change");
    });

        @if(!empty($list))
        $('#hospital-price-list,#account-price-list').select2();

        $('#apply-price-list-btn').click(function(){
            $('#apply-price-list-btn').html('<span class="spinner-border spinner-border-sm mr-2" role="status" aria-hidden="true"></span>Loading...').attr('disabled', true);
            var list_id = {{$list->ID}};
            var hospital_id = [];
            $("#hospital-price-list option:selected").each(function(){
                hospital_id.push($(this).val());
            });
            var data = {
                list_id,
                hospital_id
            }

            $.ajax({
                type: "POST",
                url: "/operations/hospitals/price-lists/multiple/import",
                data: JSON.stringify(data),
                contentType: "application/json; charset=utf-8",
            }).done(function(data ) {
                $('#apply-price-list-btn').prop("disabled",false);
                $('#modal-apply-price-list').modal('hide');
                toastr.success("Applied Successfully");
                $('#apply-price-list-btn').html('Save').attr('disabled', false);
            }).fail(function(jqXHR, textStatus, errorThrown) {
                $('#apply-price-list-btn').prop("disabled",false);
                $(".alert-danger-hospital").html(jqXHR.responseJSON.errorMessage);
                $(".alert-danger-hospital").slideDown( "slow", function() {});
                $('#apply-price-list-btn').html('Save').attr('disabled', false);

            });
            return false;
        });

        $('#apply-account-price-list-btn').click(function(){
            if (!confirm("Are you sure you want to apply this price list?")) {
                return false; // Exit the function if the user clicks "Cancel"
            }
            $(".alert-danger-person").slideUp( "slow", function() {});
            $('#apply-account-price-list-btn').html('<span class="spinner-border spinner-border-sm mr-2" role="status" aria-hidden="true"></span>Loading...').attr('disabled', true);
            var list_id = {{$list->ID}};
            var users = [];
            var is_exclude = $('#is-exclude-service').is(':checked');
            var is_only_cost = $('#is-only-cost').is(':checked');
            $("#account-price-list option:selected").each(function(key){
                users.push({user_id:$(this).val(), hospital_id:$(this).attr('hospital_id')});
            });
            var data = {
                list_id,
                is_exclude,
                is_only_cost,
                users
            }
            $.ajax({
                type: "POST",
                url: "/operations/hospitals/accounts/price-lists/import",
                data: JSON.stringify(data),
                contentType: "application/json; charset=utf-8",
            }).done(function(data ) {

                $('#apply-account-price-list-btn').prop("disabled",false);
                $('#modal-apply-price-list-accounts').modal('hide');
                toastr.success("Applied Successfully");
                $('#apply-account-price-list-btn').html('Save').attr('disabled', false);
                window.location.reload()
            }).fail(function(jqXHR, textStatus, errorThrown) {
                $('#apply-account-price-list-btn').prop("disabled",false);
                $(".alert-danger-price-list").html(jqXHR.responseJSON.errorMessage);
                $(".alert-danger-price-list").slideDown( "slow", function() {});
                $('#apply-account-price-list-btn').html('Save').attr('disabled', false);

            });
            return false;
        });
        @endif

        var hospitalSelectBox = document.getElementById('hospital-price-list');
        $('#select-hospital-all').on("click", function (e) {

                var isChecked = $('#select-hospital-all').is(':checked');
                var options = hospitalSelectBox.options;

                for (let i = 0; i < options.length; i++) {
                    options[i].selected = isChecked;
                }

                $(hospitalSelectBox).trigger('change.select2');
                $(hospitalSelectBox).select2();
        });

        var accountSelectBox = document.getElementById('account-price-list');
        $('#select-account-all').on("click", function (e) {
                var isChecked = $('#select-account-all').is(':checked');
                var options = accountSelectBox.options;

                for (let i = 0; i < options.length; i++) {
                    options[i].selected = isChecked;
                }
                $(accountSelectBox).trigger('change.select2');
                $(accountSelectBox).select2();
            });
    </script>
@endsection