@extends('layouts.header')

@section('content')

<div class="row">
    <div class="col-md-12 grid-margin">
        <div class="d-flex justify-content-between flex-wrap">
        <div class="d-flex align-items-end flex-wrap">
            <div class="mr-md-3 mr-xl-5">
            <h2>Production Report</h2>
            <div class="d-flex">
            <i class="mdi mdi-home text-muted hover-cursor"></i>
            <p class="text-muted mb-0 hover-cursor">&nbsp;/&nbsp;Report&nbsp;/&nbsp;</p>
            <p class="text-primary mb-0 hover-cursor">Production Report</p>
            </div>
            </div>
            
        </div>
        {{--  <div class="d-flex justify-content-between align-items-end flex-wrap">
            <button class="btn btn-primary mt-2 mt-xl-0">Generate report</button>
        </div>  --}}
        </div>
    </div>
</div>

<div class="row">
    <div class="col-md-12 stretch-card">
        <div class="card">
            <div class="card-body">
                <form method="GET" action="{{ route('report.production') }}" target="_blank">
                    @csrf
                    <div class="form-group">
                   
                        <div class="row">
                            <label class="col-sm-3 text-right control-label col-form-label"><b>Date:</b></label>
                            <div class="col-3">
                                <input type="date" class="form-control" id="date_from" name="date_from" value="{{ date('Y-m-d') }}" required>
                            </div>
                            <label>-</label>
                            <div class="col-3">
                                <input type="date" class="form-control" id="date_to" name="date_to" value="{{ date('Y-m-d') }}" required>
                            </div>
                        </div>
                   
                        <div class="row">
                            <label class="col-sm-3 text-right control-label col-form-label"><b>Destination:</b></label>
                            <div class="col-3">
                                <select class="form-control" name="destination_from">
                                    <option value="All">All</option>
                                    @foreach ($from as $fr)
                                        <option value="{{ $fr->from }}">{{ $fr->from }}</option>
                                    @endforeach
                                </select>
                            </div>
                            <label>-</label>
                            <div class="col-3">
                                <select class="form-control" name="destination_to">
                                    <option value="All">All</option>
                                    @foreach ($to as $des_to)
                                        <option value="{{ $des_to->to }}">{{ $des_to->to }}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>

                        <div class="row">
                            <label class="col-sm-3 text-right control-label col-form-label"><b>Vessel:</b></label>
                            <div class="col-6">
                                <select class="form-control" name="vessel" required>
                                    <option value="All">All</option>
                                    @foreach ($vessels as $ves)
                                        <option value="{{ $ves->vessel }}">{{ $ves->vessel }}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>

                        <div class="row">
                            <label class="col-sm-3 text-right control-label col-form-label"><b>Policy Type:</b></label>
                            <div class="col-6">
                                <select class="form-control" name="policy_type" id="policy" required>
                                    <option value="" selected disabled>Choose here...</option>
                                    <option value="PA">Personal Accident</option>
                                    <option value="Marine">Marine Cargo</option>
                                </select>
                            </div>
                        </div>
                    </div>
                    
                        <center>
                            <button type="submit" class="btn btn-primary">Generate Report</button>
                            <!--<a id="export_link" href="{{ url('production-report/export?date_from=2021-09-01&date_to=2021-11-16&policy=PA') }}" data-urlbase="{{ url('production-report/export?') }}" class="btn btn-primary">Export to Excel</a>-->
                        </center>
                   
                </form>
            </div>
        </div>
    </div>
</div>


@endsection

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script type="text/javascript">
    $(document).ready(function(){

         function setLink(){
            var dateFrom = $('#date_from').val();
            var dateTo = $('#date_to').val();
            var policy = $('#policy').val();
            var baseUrl = $('#export_link').data('urlbase');
            baseUrl = baseUrl+'date_from='+dateFrom+'&date_to='+dateTo+'&policy='+policy;
            console.log('policy');
            console.log( baseUrl);
            $('#export_link').attr('href', baseUrl);

        }

        setLink();
       
        $('#date_from').on('change',function(){
           setLink();
        });

        $('#date_to').on('change',function(){ 
          setLink();
        });

        $('#policy').on('change',function(){
          setLink();
        });
    });
</script>

@extends('layouts.footer')