@extends('layouts.page')

@section('title', 'Products')

@section('content')
<div class="content-wrapper">
    <!-- Content Header (Page header) -->
    <div class="content-header ">
        <div class="container-fluid">
            <div class="row mb-2">
                <div class="col-sm-6">
                    <h1 class="m-0">View Products</h1>
                </div><!-- /.col -->
                <div class="col-sm-6">
                    <ol class="breadcrumb float-sm-right">
                        <li class="breadcrumb-item"><a href="{{ route('home') }}">Home</a></li>
                        <li class="breadcrumb-item active">View Products</li>
                    </ol>
                </div>
            </div>
        </div>
    </div>

    <section class="content">
        <div class="container-fluid">
            <div class="row">
                <div class="col-12">
                    <div class="card">
                        <div class="card-body">
                            @include('layouts.error')
                            <div class="row">
                                {{-- <div class="col-lg-auto col-md-auto mt-auto my-1 ">
                                        <button class="btn btn-success">Export <i class="fa fa-download ml-2"></i></button>
                                    </div> --}}
                                <div class="col-lg-auto col-md-auto mt-auto my-1 ">
                                    <button class="btn btn-info" data-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample">Other Slots <i class="fa fa-arrow-right ml-2"></i></button>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-lg-auto mt-3">
                                    <div class="collapse" id="collapseExample">
                                        <div class="card card-body">
                                            <div class="row">
                                                <div class="form-group mb-0 col-lg-auto col-6">
                                                    <div class="custom-control custom-switch">
                                                        <input type="checkbox" class="custom-control-input js-swtich-change" id="other_sloat_s6" name="other_sloat_s6" {{ @$settings['other_sloat_s6'] == 'yes' ? 'checked': '' }} value="yes">
                                                        <label class="custom-control-label" for="other_sloat_s6">S6</label>
                                                    </div>
                                                </div>
                                                <div class="form-group mb-0 col-lg-auto col-6">
                                                    <div class="custom-control custom-switch">
                                                        <input type="checkbox" class="custom-control-input js-swtich-change" id="other_sloat_s7" name="other_sloat_s7" {{ @$settings['other_sloat_s7'] == 'yes' ? 'checked': '' }} value="yes">
                                                        <label class="custom-control-label" for="other_sloat_s7">S7</label>
                                                    </div>
                                                </div>
                                                <div class="form-group mb-0 col-lg-auto col-6">
                                                    <div class="custom-control custom-switch">
                                                        <input type="checkbox" class="custom-control-input js-swtich-change" id="other_sloat_s8" name="other_sloat_s8" {{ @$settings['other_sloat_s8'] == 'yes' ? 'checked': '' }} value="yes">
                                                        <label class="custom-control-label" for="other_sloat_s8">S8</label>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <table id="datatable" class="table table-striped">
                                <thead>
                                    <tr>
                                        <th>No</th>
                                        <th>Name</th>
                                        <th class="text-center">Short Name</th>
                                        <th class="text-center">Amount</th>
                                        <th class="text-center">Max Slots</th>
                                        <th class="text-center">Priority</th>
                                        <th class="text-center">RX Report</th>
                                        <th class="text-center">Action</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @if(!$results->isEmpty())
                                    @foreach ($results as $key => $row)
                                    <tr>
                                        <td>{{ $key + 1 }}</td>
                                        <td>{{ $row->medicine_tablet_name }}</td>
                                        <td class="text-center">{{ $row->medicine_tablet_short_name }}</td>
                                        <td class="text-center">Rs. {{ $row->medicine_tablet_per_tab}}</td>
                                        <td class="text-center">{{ $row->max_allow }}</td>
                                        <td class="text-center">{{ $row->priority }}</td>
                                        <td class="text-center">{{ $row->rx_report }}</td>
                                        <td class="text-center">
                                            <a href="javascript:;" class="icon js-edit-product" data-id="{{ $row->medicine_tablet_id  }}"><i class="fa fa-edit"></i></a>
                                            {{-- <a href="#" class="icon" data-toggle="modal" data-target="#product-view-modal"><i class="fa fa-eye"></i></a> --}}
                                        </td>
                                    </tr>
                                    @endforeach
                                    @else
                                    <tr>
                                        <td colspan="8">No Product Found</td>
                                    </tr>
                                    @endif
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
</div>

<div class="modal fade" id="edit_product">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content bg-light">
            <div class="modal-header">
                <h4 class="modal-title">Edit Product</h4>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="load-wrap">
                <div class="spinner-grow text-secondary" role="status">
                    <span class="sr-only">Loading...</span>
                </div>
            </div>
            <div class="js-box-body" style="display: none;">
                <form class="form-horizontal" action="javascript:;" method="POST" enctype="multipart/form-data" id="frm-product-edit">
                    <div class="modal-body">
                        <div class="alert alert-danger" style="display:none;"></div>
                        <div class="box-body row justify-content-center">

                            <div class="form-group col-lg-6 col-md-6">
                                <label class="col-sm-12 control-label">Name</label>
                                <div class="col-sm-12">
                                    <input type="text" name="medicine_tablet_name" id="medicine_tablet_name" class="form-control" value="" required="">
                                </div>
                            </div>
                            <div class="form-group col-lg-6 col-md-6">
                                <label class="col-sm-12 control-label">Select Group</label>

                                <select class="form-control" name="group_id" id="group_id" required="">
                                    <option value="">Select Group</option>
                                    @foreach ($groups as $r)
                                    <option value="{{ $r->group_id }}">{{ $r->group_name }}</option>
                                    @endforeach
                                </select>
                            </div>
                            <div class="form-group col-lg-6 col-md-6">
                                <label class="col-sm-12 control-label">Short Name</label>
                                <div class="col-sm-12">
                                    <input type="text" name="medicine_tablet_short_name" id="medicine_tablet_short_name" class="form-control" value="" required="">
                                </div>
                            </div>

                            <div class="form-group col-lg-6 col-md-6">
                                <label class="col-sm-12 control-label">Amount</label>
                                <div class="col-sm-12">
                                    <input type="text" name="amount" id="amount" class="form-control" value="" required="">
                                </div>
                            </div>
                            <div class="form-group col-lg-6 col-md-6">
                                <label class="col-sm-12 control-label">Max Slots</label>
                                <div class="col-sm-12">
                                    <input type="text" name="max_slots" id="max_slots" class="form-control" value="" required="">
                                </div>
                            </div>
                            <div class="form-group col-lg-6 col-md-6">
                                <label class="col-sm-12 control-label">Priority</label>
                                <div class="col-sm-12">
                                    <input type="text" name="priority" id="priority" class="form-control" value="" required="">
                                </div>
                            </div>
                            <div class="form-group col-lg-6 col-md-6">
                                <label class="col-sm-12 control-label">Sort</label>
                                <div class="col-sm-12">
                                    <input type="text" name="sort" id="sort" class="form-control" value="" required="">
                                </div>
                            </div>
                            <div class="form-group col-lg-6 col-md-6">
                                <label class="col-sm-12 control-label">Rx Report</label>
                                <div class="col-sm-6">
                                    <div class="form-check">
                                        <input class="form-check-input" type="radio" name="rx_report" id="rx_report_yes">
                                        <label class="form-check-label" for="rx_report_yes">Yes</label>
                                    </div>
                                </div>
                                <div class="col-sm-6">
                                    <div class="form-check">
                                        <input class="form-check-input" type="radio" name="rx_report" id="rx_report_no" checked>
                                        <label class="form-check-label" for="rx_report_no">No</label>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="submit" class="btn btn-primary">Submit</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="product-view-modal">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content bg-light">
            <div class="modal-header">
                <h4 class="modal-title">View Product</h4>
                <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="form-group">
                    <label class="control-label mr-2"> Name
                        : </label>Product1
                    <br>
                </div>
                <div class="form-group">
                    <label class="control-label mr-2"> Short Name
                        : </label>P1<br>
                </div>
                <div class="form-group">
                    <label class="control-label mr-2"> Amount
                        : </label>3000<br>
                </div>
                <div class="form-group">
                    <label class="control-label mr-2"> Max Slots
                        : </label>20<br>
                </div>
                <div class="form-group">
                    <label class="control-label mr-2"> Priority
                        : </label>2<br>
                </div>
            </div>
        </div>
        <!-- /.modal-content -->
    </div>
    <!-- /.modal-dialog -->
</div>
@endsection


@section('custom-js')
<script>
    $(document).ready(function() {

        $("#frm-product-edit").validate({
            rules: {
                medicine_tablet_name: {
                    required: true,
                },
                medicine_tablet_short_name: {
                    required: true,
                },
                amount: {
                    required: true,
                },
                max_slots: {
                    required: true,
                },
                priority: {
                    required: true,
                },
                rx_report: {
                    required: true,
                },
                sort: {
                    required: true,
                }
            },
        });

        $(document).on('click', '.js-edit-product', function() {
            $('#edit_product').find('.js-box-body').hide();
            $('#edit_product').find('.load-wrap').show();
            $('#edit_product').modal('show');
            $('#edit_product').find('.alert').html('').hide();

            var id = $(this).attr('data-id');
            $.ajax({
                url: "{{ url('/products') }}/" + id,
                method: 'GET',
                data: {},
                success: function(obj) {
                    if (obj.code == 1) {
                        $('#frm-product-edit').find('input[name="medicine_tablet_name"]').val(obj.result.medicine_tablet_name);
                        $('#frm-product-edit').find('input[name="medicine_tablet_short_name"]').val(obj.result.medicine_tablet_short_name);
                        $('#frm-product-edit').find('input[name="amount"]').val(obj.result.medicine_tablet_per_tab);
                        $('#frm-product-edit').find('input[name="max_slots"]').val(obj.result.max_allow);
                        $('#frm-product-edit').find('input[name="priority"]').val(obj.result.priority);
                        $('#frm-product-edit').find('input[name="sort"]').val(obj.result.sort);
                        $('#frm-product-edit').find('#group_id').val(obj.result.group_id);

                        if (obj.result.rx_report == 1)
                            $('#frm-product-edit').find('#rx_report_yes').prop('checked', true);
                        else
                            $('#frm-product-edit').find('#rx_report_no').prop('checked', true);


                        $('#frm-product-edit').attr('data-id', id);
                        $('#edit_product').find('.load-wrap').hide();
                        $('#edit_product').find('.js-box-body').show();
                    }
                }
            });
        });

        $(document).on('submit', '#frm-product-edit', function() {
            var that = $(this);
            that.find('.alert').html('').hide();

            if (that.valid()) {
                that.find('button').text('Processing...');
                that.find('button').prop('disable', 'true');

                var formData = new FormData(that[0]);
                $.ajax({
                    url: "{{ url('/products') }}/" + that.attr('data-id'),
                    method: 'POST',
                    data: formData,
                    processData: false,
                    contentType: false,
                    cache: false,
                    success: function(obj) {
                        that.find('button').text('Submit');
                        that.find('button').prop('disable', 'false');
                        if (obj.code == 1) {
                            window.location.reload();
                        } else {
                            that.find('.alert').html(obj.message).show();
                        }
                    }
                });
            }
        });

        $(document).on('change', '.js-swtich-change', function() {
            $.ajax({
                url: "{{ url('/products/slot') }}",
                method: 'POST',
                data: {
                    value: $(this).prop('checked') ? 'yes' : 'no',
                    key: $(this).attr('name'),
                },
                success: function(obj) {

                },
                error: function(request, status, error) {
                    that.find('button').text('Submit');
                    that.find('button').prop("disabled", false);

                    that.find('.alert').html('Something went wrong please try after some time').show();
                }
            });
        })
    });
</script>
@endsection