@section('optional_css')
    <!-- SweetAlert2 -->
    <link rel="stylesheet" href="{{ asset('plugins/sweetalert2-theme-bootstrap-4/bootstrap-4.min.css') }}">
    <!-- DataTables -->
    <link rel="stylesheet" href="{{ asset('plugins/datatables-bs4/css/dataTables.bootstrap4.min.css') }}">
    <link rel="stylesheet" href="{{ asset('plugins/datatables-responsive/css/responsive.bootstrap4.min.css') }}">
    <link rel="stylesheet" href="{{ asset('plugins/datatables-buttons/css/buttons.bootstrap4.min.css') }}">

    <link rel="stylesheet" href="{{ asset('plugins/daterangepicker/daterangepicker.css') }}">
@endsection
@section('optional_js')
    <!-- SweetAlert2 -->
    <script src="{{ asset('plugins/sweetalert2/sweetalert2.min.js') }}"></script>
    <!-- DataTables  & Plugins -->
    <script src="{{ asset('plugins/datatables/jquery.dataTables.min.js') }}"></script>
    <script src="{{ asset('plugins/datatables-bs4/js/dataTables.bootstrap4.min.js') }}"></script>
    <script src="{{ asset('plugins/datatables-responsive/js/dataTables.responsive.min.js') }}"></script>
    <script src="{{ asset('plugins/datatables-responsive/js/responsive.bootstrap4.min.js') }}"></script>

    <!-- Date Picker -->
    <script src="{{ asset('plugins/moment/moment.min.js') }}"></script>
    <script src="{{ asset('plugins/daterangepicker/daterangepicker.js') }}"></script>

    <script>
        $(document).ready(function () {
            $('.datepicker').daterangepicker({
                singleDatePicker: true,
                showDropdowns: true,
                locale: {
                    format: 'YYYY-MM-DD'
                }
            })

            var table = $('.table').DataTable({
                order: [ 0, "desc" ],
                responsive: true,
                pageLength: 10,
                processing: true,
                serverSide: true,
                ajax: '{!! route('admin.uinvoice.datatable') !!}',
                columns: [
                    { data: 'id', name: 'id' },
                    { data: 'kode', name: 'kode' },
                    { data: 'name', name: 'admins.name' },
                    { data: 'nama', name: 'nama' },
                    { data: 'nomor_telepon', name: 'nomor_telepon' },
                    { data: 'tanggal_invoice', name: 'tanggal_invoice' },
                    { data: 'total_tagihan', name: 'total_tagihan' },
                    { data: 'status', name: 'status' },
                    { data: 'action', name: 'action', 'orderable': false },
                ],
                drawCallback: function( settings ) {
                    $('.delete-row').on('click', function() {
                        Swal.fire({
                            title: 'Are you sure?',
                            text: "You won't be able to revert this!",
                            icon: 'warning',
                            showCancelButton: true,
                            confirmButtonColor: '#3085d6',
                            cancelButtonColor: '#d33',
                            confirmButtonText: 'Yes, delete it!'
                        }).then((result) => {
                            if (result.isConfirmed) {
                                event.preventDefault();
                                Swal.fire(
                                    'Deleted!',
                                    'Your file has been deleted.',
                                    'success'
                                    )
                                this.closest('form').submit();
                            }
                        })
                    })
                }
            });
        })
    </script>
@endsection

<x-app-layout>
    <x-slot name="header">
        <div class="row mb-2">
            <div class="col-sm-6">
                <h1 class="m-0">{{ __('Invoice') }}</h1>
            </div><!-- /.col -->
            <div class="col-sm-6">
            </div><!-- /.col -->
        </div><!-- /.row -->
    </x-slot>
    @if(session('success'))
        <x-alert-success>
            {{ session('success') }}
        </x-alert-success>
    @endif
    @if(session('delete'))
        <x-alert-danger>
            {{ session('delete') }}
        </x-alert-danger>
    @endif
    <form class="form-horizontal" action="{{ route('admin.uinvoice.rekap-invoice') }}" method="POST" enctype="multipart/form-data">
        @csrf
        <x-card class="col-sm-12">
            <x-slot name="title">{{ __('Rekap Invoice') }}</x-slot>
            <div class="form-group row">
                <div class="col-sm-10">
                    <div class="form-group row">
                        <div class="col-sm-6">
                            <x-input id="tanggal_mulai" class="datepicker {{ $errors->has('tanggal_mulai') ? 'is-invalid' : '' }}" type="text" name="tanggal_mulai" :value="old('tanggal_mulai', request()->get('tanggal_mulai'))"/>
                        </div>
                        <div class="col-sm-6">
                            <x-input id="tanggal_selesai" class="datepicker {{ $errors->has('tanggal_selesai') ? 'is-invalid' : '' }}" type="text" name="tanggal_selesai" :value="old('tanggal_selesai', request()->get('tanggal_selesai'))"/>
                        </div>
                    </div>
                </div>
                <div class="col-sm-2">
                    <div class="form-group">
                        <input type="submit" value="{{ __('Export') }}" class="form-control btn-success">
                    </div>
                </div>
            </div>
        </x-card>
    </form>
    <form class="form-horizontal" action="{{ route('admin.uinvoice.kode-invoice') }}" method="POST" enctype="multipart/form-data">
        <x-card class="col-sm-12">
            <x-slot name="title">{{ __('Input Kode Invoice') }}</x-slot>
            @csrf
            <div class="form-group row">
                <div class="col-sm-10">
                    <div class="form-group row">
                        <div class="col-sm-12">
                            <x-input id="kode" placeholder="{{ __('Kode Invoice') }}" class="{{ $errors->has('kode') ? 'is-invalid' : '' }}" type="text" name="kode" :value="old('kode')" autofocus/>
                            @if ($errors->has('kode'))
                                <small class="error invalid-feedback">{{ $errors->first('kode') }}</small>
                            @endif
                        </div>
                    </div>
                </div>
                <div class="col-sm-2">
                    <div class="form-group">
                        <input type="submit" value="{{ __('Cari') }}" class="form-control btn-success">
                    </div>
                </div>
            </div>
        </x-card>
    </form>
    <x-card>
        <x-slot name="title">{{ __('Invoice') }}</x-slot>
        <div class="col-12 table-responsive">
            <table class="table table-bordered">
                <thead>
                    <tr>
                        <th>{{ __('ID') }}</th>
                        <th>{{ __('Kode') }}</th>
                        <th>{{ __('Kasir') }}</th>
                        <th>{{ __('Nama') }}</th>
                        <th>{{ __('Nomor Telepon') }}</th>
                        <th>{{ __('Tanggal Invoice') }}</th>
                        <th>{{ __('Total Tagihan') }}</th>
                        <th>{{ __('Status') }}</th>
                        <th>{{ __('Action') }}</th>
                    </tr>
                </thead>
                <tbody>
                    
                </tbody>
            </table>
        </div>
    </x-card>
</x-app-layout>