@extends('layouts.app')

@section('content')

    <div class="container-fluid">
        <div class="row">
            <div class="col-6">
                <div class="page-title">
                    <h4>Invantaire</h4>
                </div>
            </div>
            <div class="col-6">
                @can('authorize', 'browse_inventories')
                    {{-- <a href="#" class="btn btn-default pull-right">
                        <i class="ti-plus pdd-right-5"></i>
                        <span>Telecharger PDF</span>
                    </a> --}}
                @endcan
            </div>
        </div>
        
        @can('authorize', 'edit_inventories')
            <div class="row">
                <div class="col-md-12">
                    <div class="card">
                        <div class="card-block">
                            <div class="tab-info">
                                <ul class="nav nav-tabs" role="tablist">
                                    <li class="nav-item">
                                        <a href="#inventory-tab-1" class="nav-link active" role="tab" data-toggle="tab">Invantaire</a>
                                    </li>
                                </ul>
                                <div class="tab-content">
                                    <div role="tabpanel" class="tab-pane fade in active" id="inventory-tab-1">
                                        <div class="pdd-horizon-15 pdd-vertical-20">
                                            <form action="" id="inventory-report-form">
                                                <div class="row">
                                                    <div class="col-md-4">
                                                        <div class="row mt-4">
                                                            <div class="col-md-12">
                                                                <label>Sélectionnez la plage de dates</label>
                                                                <select name="report_date_range" id="inventory-report-date-range">
                                                                    <option value="today">Today</option>
                                                                    <option value="yesterday">Yesterday</option>
                                                                    <option value="this_week">This Week</option>
                                                                    <option value="previous_week">Previous Week</option>
                                                                    <option value="this_month">This Month</option>
                                                                    <option value="previous_month">Previous Month</option>
                                                                    <option value="this_year">This Year</option>
                                                                    <option value="previous_year">Previous Year</option>
                                                                    <option value="custom" selected="">Custom</option>
                                                                </select>
                                                            </div>
                                                        </div>

                                                        <div class="row mt-4" id="inventory-report-date">
                                                            
                                                            <div class="col-md-6">
                                                                <label>From Date</label>
                                                                <div class="timepicker-input input-group">
                                                                    <span class="input-group-text">
                                                                            <i class="ti-calendar"></i>
                                                                        </span>
                                                                    <input type="text" name="from_date" class="form-control datepicker-2" placeholder="Pick your date" data-provide="datepicker">
                                                                </div>
                                                            </div>

                                                            <div class="col-md-6">
                                                                <label>To Date</label>
                                                                <div class="timepicker-input input-group">
                                                                    <span class="input-group-text">
                                                                            <i class="ti-calendar"></i>
                                                                        </span>
                                                                    <input type="text" name="to_date" class="form-control datepicker-2" placeholder="Pick your date" data-provide="datepicker">
                                                                </div>
                                                            </div>
                                                        </div>

                                                        <div class="row mt-4">
                                                            <div class="col-md-12 mt-4 text-center">
                                                                <a href="#" class="btn btn-default" id="generate-inventory-report">
                                                                    {{-- <i class="ti-plus pdd-right-5"></i> --}}
                                                                    <span>Générer Inventaire</span>
                                                                </a>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div class="col-md-8">
                                                        <iframe name="inventory_report_iframe" id="inventory-report-iframe" style="position:absolute; left: 0; top: 0;" width="100%" height="1122px" src="{{ asset('inventoy-report.pdf') }}" type="application/pdf" internalid=""></iframe>
                                                    </div>
                                                </div>  

                                            </form>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        @endcan
    </div>

@endsection

@push('scripts')

    <script>
        $('#inventory-report-date-range').selectize({
            create: false,
            /*sortField: {
                field: 'text',
                direction: 'asc'
            },*/
            dropdownParent: 'body'
        });
    </script>

    <script>
        var form = $("#inventory-report-form");

        form.find("select[name=report_date_range]").on('change',  function(event) {
            event.preventDefault();
            
            var dateRange = $(this).val();

            if (dateRange == 'custom') {
                $("#inventory-report-date").show(500)
            }else{
                $("#inventory-report-date").hide(200)
            }

        });


    </script>

    <script>
        $("#generate-inventory-report").on('click', function(event) {
            event.preventDefault();
            var form = $("#inventory-report-form");
            var data = {
                _token: $("meta[name=csrf-token]").attr('content'),
                report_date_range: form.find("select[name=report_date_range]").val(),
                from_date: form.find("input[name=from_date]").val(),
                to_date: form.find("input[name=to_date]").val(),
                report: form.find("input[name=report]").val(),
            };

            $.post("{{ route('inventories.store') }}", data, function(data, textStatus, xhr) {
                document.getElementById('inventory-report-iframe').contentDocument.location.reload(true);
            });
        });
    </script>    

@endpush