@extends('layouts.app')

@section('content')

    <div class="panel panel-primary">
        <div class="panel-heading">
            <h3 class="panel-title">Seller Report </h3>
        </div>
        <div class="panel-body">

            <form action="{{ route('new-format-export-seller-report') }}" method="post">
                @csrf
                <div class="row">
                    <div class="form-group col-md-3">
                        <label for="seller_code">Select Seller</label>
                        <select name="seller_code" id="seller_code" class="form-control select2">
                            <option value="" style="display:none;">Please Select Seller</option>
                            @foreach($sellers as $seller)
                                <option value="{{ $seller->seller_code }}" @if(old('seller_code') == $seller->seller_code) selected @endif>{{ $seller->name }}</option>
                            @endforeach
                        </select>
                        @error('seller_code') <small class="form-text text-danger">{{ $message }}</small>@enderror
                    </div>
                    <div class="form-group col-md-3">
                        <label for="dateRange">Date Range</label>
                        <input type="text" name="dateRange" id="dateRange" class="form-control"
                               value="{{old('dateRange')}}" autocomplete="off" placeholder="Search for date ">
                    </div>

                </div>
                <div class="row">
                    <div class="form-group col-md-3">
                        <button type="submit" class="btn btn-primary">Export Seller Report</button>
                    </div>

                </div>
            </form>
        </div>


        @endsection
        @push('css')
            <link rel="stylesheet" type="text/css"
                  href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css"/>
        @endpush
        @push('script')
            <script type="text/javascript" src="https://cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>
            <script type="text/javascript"
                    src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js"></script>
            <script>
                $(function () {
                    let dateRange = $('input[name="dateRange"]');
                    dateRange.daterangepicker({
                        autoUpdateInput: false,
                        maxDate: new Date(),
                        locale: {
                            cancelLabel: 'Clear'
                        }
                    });

                    dateRange.on('apply.daterangepicker', function (ev, picker) {
                        $(this).val(picker.startDate.format('MM/DD/YYYY') + ' - ' + picker.endDate.format('MM/DD/YYYY'));
                    });

                    dateRange.on('cancel.daterangepicker', function (ev, picker) {
                        $(this).val('');
                    });

                });
            </script>
    @endpush