@extends('dashboard.layouts.app')
@push('headScripts')
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/css/bootstrap-datepicker.min.css" integrity="sha512-mSYUmp1HYZDFaVKK//63EcZq4iFWFjxSL+Z3T/aCt4IO9Cejm03q3NKKYN6pFQzY0SBOr8h+eCIAZHPXcpZaNw==" crossorigin="anonymous" referrerpolicy="no-referrer" />
    <link rel="stylesheet" href="{{ asset('assets/plugins/bootstrap-datepicker/css/bootstrap-datepicker.css') }}"  />
@endpush
@section('content')
    <div class="container-xxl flex-grow-1 container-p-y">
        <h4 class="fw-bold py-3 mb-4"><span class="text-muted fw-light">{{ __('KPIS') }} /</span> <a href="{{ route('users_kpis.index') }}" class="text-muted fw-light">{{ __('Users KPIS') }} /</a> /{{ __('Operation Export') }}</h4>
        <div class="row">
            <div class="col-md-12">
                <form method="POST" action="{{ request()->fullUrl() }}" >
                    @csrf
                    <div class="card mb-4">
                        <h5 class="card-header">{{ __('Operation Export') }}</h5>
                        <div class="card-body">
                            <div class="row">
                                <input type="hidden" name="export_type" value="excel">
                                <div class="form-group col-lg-12 mb-3">
                                    <label class="form-label">{{ __('Year & Month') }}</label>
                                    <input type="text" class="form-control @error('month') is-invalid @enderror @error('year_month') is-invalid @enderror" id="year_month" name="year_month" value="{{ old('year_month') }}"/>
                                    @error('year_month')
                                    <span class="invalid-feedback" role="alert">
                                            <strong>{{ $message }}</strong>
                                        </span>
                                    @enderror
                                    @error('month')
                                    <span class="invalid-feedback" role="alert">
                                            <strong>{{ $message }}</strong>
                                        </span>
                                    @enderror
                                </div>
                            </div>
                        </div>



                    </div>

                    <div class="card mb-4">
                        <div class="card-body">
                            <div class="text-center">
                                <button type="submit" id="submitData" class="btn btn-danger px-5">{{ __('Export') }}</button>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
@endsection
@push('footerScripts')

    <script src="{{ asset('assets/plugins/bootstrap-datepicker/js/bootstrap-datepicker.js') }}" ></script>
    <script type="text/javascript">
        $("#year_month").datepicker( {
            format: "mm-yyyy",
            viewMode: "months",
            minViewMode: "months"
        });
    </script>
    <style>
        #ui-datepicker-div{
            z-index: 99;
        }
        .ui-datepicker-calendar {
            display: none;
        }
    </style>
@endpush