@extends('layouts.main')

@push('styles')
    <link href="{{ asset('elite/bower_components/bootstrap-datepicker/bootstrap-datepicker.min.css') }}" rel="stylesheet"
        type="text/css" />
    <link href="{{ asset('/elite/bower_components/datatables/jquery.dataTables.min.css') }}" rel="stylesheet"
        type="text/css" />
    <link href="{{ asset('elite/tables/css/buttons.dataTables.min.css') }}" rel="stylesheet" type="text/css" />
    <link href="{{ asset('elite/bower_components/select2/select2.min.css') }}" rel="stylesheet" />
@endpush

@section('content')
    <div class="row bg-title">
        <div class="col-lg-3 col-md-4 col-sm-4 col-xs-12">
            <h4 class="page-title">{{ __('clinical_data.radiologies_usage') }}</h4>
        </div>
        <div class="col-lg-9 col-sm-8 col-md-8 col-xs-12">
            <ol class="breadcrumb">
                <li><a href="{{ route('home') }}"><i class="fa fa-home"></i> {{ __('clinical_data.dashboard') }}</a></li>
                <li class="active"><i class="fa fa-bank"></i> {{ __('clinical_data.radiologies_usage') }}</li>
            </ol>
        </div>
    </div>

    @include('investigations::radiologies.menu')

    @include('flash::message')

    <div class="row">
        <div class="col-md-12">
            <div class="row">
                <div class="col-md-12">
                    @include('flash::message')
                    <div class="panel">
                        <div class="panel-heading d-flex justify-content-between flex-wrap">
                            <span><b>{{ __('clinical_data.radiologies_usage') }}</b></span>
                            <div class="d-flex justify-content-between ">
                                 @if (Auth::user()->can('radiologies-report-usage'))
                                <a href="{{ route('radiology.usages_report') }}" class="nav-item btn btn-default">
                                    {{ __('clinical_data.radiology_usages_report') }}</a>
                                    @endif 
                            </div>
                        </div>
                        <div class="panel-body">
                            {{ Form::open(['route' => 'radiology.usage', 'data-toggle' => 'validator', 'method' => 'POST']) }}
                            <div class="row">
                                <div class="col-md-12">
                                    <div class="pull-left">
                                        <a href="javascript:void(0)" class="text-center db">
                                            @php $hospital_information = \Streamline\Models\HospitalInformation::first(); @endphp
                                            <img src="{{ asset($hospital_information->logo) }}"
                                                style="max-height: 160px; margin: auto; max-width: 260px;"
                                                alt="Home" /><br />
                                        </a>
                                        <address>
                                            <h3> &nbsp;<b class="text-danger">{{ $hospital_information->name }}</b></h3>
                                            <p class="text-muted m-l-5">{{ $hospital_information->phone_number }},
                                                {{ $hospital_information->email }},
                                                <br />
                                                {{ get_name($hospital_information->sub_county, 'id', 'name', 'subcounties') }},
                                                {{ get_name($hospital_information->district, 'id', 'name', 'districts') }},
                                                <br /> {{ $hospital_information->country }}.
                                            </p>
                                        </address>
                                    </div>
                                    <div class="pull-right text-right">
                                        <address>
                                            <p class="m-t-30"><b>{{ __('labs.date') }} : </b> <i
                                                    class="fa fa-calendar"></i>
                                                {{ streamline_date_time(\Carbon\Carbon::now()->toDateTimeString()) }}</p>
                                        </address>

                                        <div class="form-group">
                                            {{ Form::label('dates', __('labs.enter_dates')) }}
                                            <select class="form-control compulsory" name="dates" id="dates" required>
                                                <option value="">-{{ __('labs.select') }}-</option>
                                                <option value="today">{{ __('labs.today') }}</option>
                                                <option value="custom_date_range">{{ __('labs.date_range') }}</option>
                                            </select>
                                        </div>
                                        <div id="sDate" style="display: none;">
                                            <div class="form-group">
                                                {{ Form::label('start_date', __('labs.date_on')) }}
                                                <div class="input-group">
                                                    {{ Form::text('start_date', '', ['class' => 'form-control required compulsory', 'readonly', 'id' => 'start_date']) }}
                                                    <span class="input-group-addon"><i class="icon-calender"></i></span>
                                                </div>
                                            </div>
                                        </div>
                                        <div id="eDate" style="display: none;">
                                            <div class="form-group">
                                                {{ Form::label('end_date', __('labs.end_date')) }}
                                                <div class="input-group">
                                                    {{ Form::text('end_date', '', ['class' => 'form-control required compulsory', 'readonly', 'id' => 'end_date']) }}
                                                    <span class="input-group-addon"><i class="icon-calender"></i></span>
                                                </div>
                                            </div>
                                        </div>

                                    </div>
                                </div>
                            </div>
                            <br />

                            <div class="row">
                                <div class="col-12">
                                    
                                </div>
                            </div>
                            <br />

                            @php
                                $options = "<option value=''>--" . __('labs.select') . '--</option>';
                                foreach ($radiologies as $item) {
                                    $options .= "<option value='$item->id'>$item->name</option>";
                                }
                            @endphp


                            <div class="input_fields_wrap">
                                <div class="row">
                                    <div class="span1"></div>
                                    <div class="col-md-2">
                                        <div class=" control-group">
                                            <label class="control-label" for="item">{{ __('clinical_data.name') }}
                                                :</label>
                                            <div class="form-group">
                                                <select name='labItem[]' id='lab-item_0'
                                                    class="form-control calculate select">
                                                    <option>- {{ __('labs.select') }} -</option>
                                                    @foreach ($radiologies as $item)
                                                        <option style='color: orange;' value='{{ $item->id }}'>
                                                            {{ $item->name }}</option>
                                                    @endforeach
                                                </select>
                                            </div>
                                        </div>
                                    </div><!-- Item -->

                                    @php
                                        $options = "<option value=''>- " . __('labs.select') . ' -</option>';
                                        foreach ($radiologies as $item) {
                                            $options .= "<option value='$item->id'>$item->name</option>";
                                        }
                                    @endphp

                                    <div class='col-md-2'>
                                        <div class="form-group">
                                            <label class='control-label'
                                                class=''>{{ __('labs.available_quantity') }}</label>
                                            <div class=''>
                                                <input type='text' name='availableQty[]' id ='available-qty_0'
                                                    class='form-control compulsory' readonly>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="col-md-2">
                                        <div class="form-group">
                                            <label class="control-label">{{ __('labs.quantity_required') }}</label>
                                            <input type='text' name='requiredQty[]' id ='required-qty_0'
                                                class='form-control compulsory'>
                                        </div>
                                    </div>

                                    <div class='col-md-2'>
                                        <div class="form-group">
                                            <label class='control-label' class=''>{{ __('labs.unit_cost') }}</label>
                                            <div class=''>
                                                <input type='text' name='unitCost[]' id ='cost_0'
                                                    class='form-control' readonly>
                                            </div>
                                        </div>
                                    </div>

                                    <div class='col-md-2'>
                                        <div class="form-group">
                                            <label class='control-label'
                                                class=''>{{ __('labs.total_cost') }}</label>
                                            <div class=''>
                                                <input type='text' name='totalCost[]' id ='total-cost_0'
                                                    class='form-control' readonly>
                                            </div>
                                        </div>
                                    </div>


                                    <div class="col-1">
                                        <div class="form-group text-right" style="margin-top: 30px; margin-left: 3px;">
                                            <a class="label label-success add_item" style="color: white"><i
                                                    class="fa fa-plus"></i> {{ __('labs.add_item') }}</a>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="row">
                                <div class='col'>
                                    <div style="display: block">
                                        <button type="submit" id="submit_usage" style="display: none"
                                            class ="btn btn-success btn-rounded float-right">{{ __('labs.submit_usage') }}</button>
                                    </div>
                                </div>
                            </div>
                            {{ Form::close() }}
                        </div>
                    </div>
                </div>
            </div>
        </div>

    </div>
@endsection

@push('scripts')
    <script src="{{ asset('elite/bower_components/datatables/jquery.dataTables.min.js') }}"></script>
    <script src="{{ asset('elite/bower_components/select2/select2.min.js') }}"></script>
    <script type="text/javascript"
        src="{{ asset('elite/bower_components/bootstrap-datepicker/bootstrap-datepicker.min.js') }}"></script>

    <script>
        $('#start_date').datepicker({
            autoclose: true,
            todayHighlight: true,
            format: 'dd-mm-yyyy'
        });

        $('#end_date').datepicker({
            autoclose: true,
            todayHighlight: true,
            format: 'dd-mm-yyyy'
        });

        $(document).ready(function() {

            $(".input_fields_wrap").on('change', "select,input", function() {
                //            var i = parseInt(this.id.replace("item_", ""), 10);
                var i = parseInt(this.id.substr(this.id.indexOf("_") + 1));

                var lab_item_select = $("#lab-item_" + i);
                var lab_item = $("#lab-item_" + i).val();
                var available_qty = $("#available-qty_" + i);
                var cost = $('#cost_' + i);
                var total_cost = $('#total-cost_' + i);

                if (lab_item === "") {
                    alert("<?php echo __('labs.select_lab_item'); ?>");
                    return false;
                }

                $.ajax({
                    method: 'POST',
                    url: '/radiology/get_radiology_quantity',
                    data: {
                        'id': lab_item,
                        _token: '{{ csrf_token() }}',
                    },

                    success: function(response) {

                        available_qty.val(response['pharmacy_stock']);
                        cost.val(response['cost_price'])

                        var required_qty = $('#required-qty_' + i);
                        if (response['pharmacy_stock'] >= required_qty.val()) {
                            $("[id^='cost_']").each(function() {
                                total = Number($(this).val()) * required_qty.val();
                            });
                            total_cost.val(total);
                            console.log(total);
                            $('#submit_usage').show();

                        } else {
                            alert('<?php echo __('labs.amount_not_available'); ?>');
                            required_qty.val(0);
                            $('#submit_usage').hide();
                        }

                    },
                    error: function(error) {
                        console.log(error);
                    }
                });
                .9
            });
        })

        var max_fields = 20; //maximum input boxes allowed
        var wrapper = $(".input_fields_wrap"); //Fields wrapper
        var add_button = $(".add_item"); //Add button ID

        var x = 1; //initlal text box count

        $(add_button).click(function(e) { //on add input button click
            e.preventDefault();
            if (x < max_fields) { //max input box allowed
                x++; //text box increment

                $(wrapper).append("\
                    <div class='row'>\n\
                        <div class='span1'></div>\n\
                        <div class='col-md-2'>\n\
                            <div class='form-group'>" +
                    "<div class='controls'>\n\
                            <select name='labItem[]' id='lab-item_" + x + "' class='form-control compulsory'>" +

                    "<?php echo $options; ?>" +

                    "</select>\n\
                </div>\n\
            </div>\n\
        </div>\n\
        <div class='col-md-2'>\n\
            <div>\n\
                <div class='form-group'>" +
                    "<input type='number' name='availableQty[]' id ='available-qty_" + x + "' class='form-control compulsory' readonly>\n\
                                </div>\n\
                            </div>\n\
                        </div>\n\
                        <div class='col-md-2'>\n\
                            <div class='form-group'>" +
                    "<div class='controls'>\n\
                             <input type='number' name='requiredQty[]' id='required-qty_" + x +
                    "' class='form-control compulsory'>" +
                    "\n\
                    </div>\n\
                </div>\n\
            </div>\n\
            <div class='col-md-2'>\n\
                <div>\n\
                    <div class='form-group'>\n\
                        <input type='text' name='unitCost[]' id='cost_" + x + "' class='form-control' readonly>\n\
                        </div>\n\
                            </div>\n\
                        </div>\n\
                        \<div class='col-md-2'>\n\
                <div>\n\
                    <div class='form-group'>\n\
                        <input type='text' name='totalCost[]' id='total-cost_" + x + "' class='form-control' readonly>\n\
                        </div>\n\
                            </div>\n\
                        </div>\n\
                        \ <div class='col-1'>\n\
                <div class=''>\n\
                    <div class='form-group text-right' style='margin-top: 5px;'>\n\
                        &nbsp;<!--<a href='#' class='label label-success add_item' style='color: white'><i class='fa fa-plus'></i></a>-->\n\
                        &nbsp;<a href='#' class='remove_field label label-danger' style='margin-top:5px;'>delete item</a>\n\
                        </div>\n\
                            </div>\n\
                        </div>\n\
                    </div>\n\
                </div>\n\
            </div>\n\
            ");
                $('#lab-item_' + x).select2(); //add input box
            }
        });

        $(wrapper).on("click", ".remove_field", function(e) { //user click on remove text
            e.preventDefault();
            $(this).parent('div').parent('div').parent('div').parent('div').remove();

            var final_total = 0;
            var total_field = $("#total_amount");

            $("[id^='amount_']").each(function() {
                final_total += Number($(this).val());
            });
            total_field.val(final_total);
            x--;
        });

        $('.select').select2({
            placeholder: "-- <?php echo __('labs.select'); ?> --"
        });
        $('.table').DataTable({
            "pageLength": 25,
        });

        $('#dates').change(function(e) {
            if ($(this).val() === "custom_date_range") {
                $("#sDate").show();
                $("#eDate").show();
            } else {
                $("#eDate").hide();
                $("#sDate").hide();
            }
        });
    </script>
@endpush