@extends('layouts/contentLayoutMaster')

@section('title', 'Milk Advances')

@section('vendor-style')
    {{-- vendor css files --}}
    <link rel="stylesheet" href="{{ asset('vendors/css/tables/datatable/dataTables.bootstrap5.min.css') }}">
    <link rel="stylesheet" href="{{ asset('vendors/css/tables/datatable/buttons.bootstrap5.min.css') }}">
    <link rel="stylesheet" href="{{ asset('vendors/css/extensions/sweetalert2.min.css') }}">
    <link rel="stylesheet" href="{{ asset('/css/custom.css') }}">
    <link rel="stylesheet" href="{{ asset('vendors/css/forms/select/select2.min.css') }}">

@endsection
<style>
    .row {
        margin-right: calc(-1.4 * var(--bs-gutter-x)) !important;
        margin-left: calc(-1.4 * var(--bs-gutter-x)) !important;
    }

    html .content .content-wrapper .content-header-title {
        margin-left: 28px !important;
    }
</style>
@section('content')
    <!-- Column Search -->
    <section id="column-search-datatable">
        <div class="row">
            <div class="col-12">
                <div class="card">
                    <div class="card-header border-bottom">
                        <h4 class="card-title">Milk Advances</h4>
                        @can('Create MilkAdvance')
                            <a class="add-new-btn btn btn-primary mt-2 mr_30px" href="#" data-bs-target="#addModal"
                                data-bs-toggle="modal">Add New</a>
                        @endcan
                    </div>
                    <div class="card-datatable table-responsive">
                        <table class="table" id="advance_table">
                            <thead>
                                <tr>
                                    <th>Code</th>
                                    <th>Supplier</th>
                                    <th>Region</th>
                                    <th>Collection Points</th>
                                    <th>Source</th>
                                    <th>Advance</th>
                                    <th>No of Instalments</th>
                                    <th>WEF</th>
                                    <th>Created By</th>
                                    <th>Action</th>
                                </tr>
                            </thead>
                            <tbody></tbody>
                        </table>
                        <div style="float:right; margin-top:4px;">
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <div class="modal fade" id="addModal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header bg-transparent">
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body px-sm-5 pb-5">
                    <div class="text-center mb-2">
                        <h1 class="mb-1">Add Milk Advance</h1>
                    </div>
                    <form action="{{ route('milk-advance.store') }}" method="POST" class="row" id="addForm">
                        @csrf
                        <div class="col-12">
                            <label class="form-label" for="supplier">Region</label>
                            <select name="region_id" id="region_id" class="select2 form-select" required>
                                <option value="" selected disabled>Select Region</option>
                                @foreach ($combined_results as $data)
                                    <option {{ old('region_id') == $data['_id'] ? 'selected' : '' }}
                                        value="{{ $data['_id'] }}">
                                        {{ ucfirst($data['name']) }}
                                    </option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col-12">
                            <label class="form-label" for="source">Source</label>
                            <select name="source_id" id="source_id" class="select2 form-select" required>
                                <option value="" selected disabled>Select Source</option>
                                @foreach ($sources as $source)
                                    <option {{ old('source_id') == $source['id'] ? 'selected' : '' }}
                                        value="{{ $source['id'] }}">
                                        {{ ucfirst($source['name']) }}
                                    </option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col-12">
                            <label class="form-label" for="name">Supplier</label><span class="text-danger">*</span>
                            <select name="supplier_id" class="select2 form-select" data-placeholder="Select Supplier"
                                id="supplier_id" required>
                                <option disabled value="" selected>Select Supplier</option>
                                {{-- @foreach ($suppliers as $supplier)
                                    <option value="{{ $supplier->id }}">{{ ucfirst($supplier->name) }}
                                        {{ $supplier->code }}
                                    </option>
                                @endforeach --}}
                            </select>
                            <span class="text-danger error-message"></span>
                        </div>
                        <div class="col-12">
                            <label class="form-label" for="name">Advance</label><span class="text-danger">*</span>
                            <input required type="text" required id="advance" class="form-control" name="advance"
                                placeholder="Advance">
                            <span class="text-danger error-message"></span>
                        </div>
                        <div class="col-12">
                            <label class="form-label" for="name">No.of Instalments</label><span
                                class="text-danger">*</span>
                            <input required type="number" required id="instalments" class="form-control" name="instalments"
                                placeholder="Instalments">
                            <span class="text-danger error-message"></span>
                        </div>
                        <div class="col-12">
                            <label class="form-label" for="wef">W.E.F</label>
                            <input id="wef" type="date" value="" class="form-control" name="wef"
                                placeholder="From" required>
                        </div>
                        <div class="col-12 text-center">
                            <button type="submit" class="btn btn-primary mt-2 me-1">Save</button>
                            <button type="reset" class="btn btn-outline-secondary mt-2" data-bs-dismiss="modal"
                                aria-label="Close">
                                Close
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade" id="editModal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header bg-transparent">
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body px-sm-5 pb-5">
                    <div class="text-center mb-2">
                        <h1 class="mb-1">Update Milk Advance</h1>
                    </div>
                    <form class="form" action="#" id="editForm" method="POST">
                        @csrf
                        <input type="hidden" name="id" id="id">
                        <div class="col-12">
                            <label class="form-label" for="supplier">Region</label>
                            <select name="region_id" id="region_id_edit" class="select2 form-select" required>
                                <option value="" selected disabled>Select Region</option>
                                @foreach ($combined_results as $data)
                                    <option {{ old('region_id') == $data['_id'] ? 'selected' : '' }}
                                        value="{{ $data['_id'] }}">
                                        {{ ucfirst($data['name']) }}
                                    </option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col-12">
                            <label class="form-label" for="source">Source</label>
                            <select name="source_id" id="source_id_edit" class="select2 form-select" required>
                                <option value="" selected disabled>Select Source</option>
                                @foreach ($sources as $source)
                                    <option {{ old('source_id') == $source['id'] ? 'selected' : '' }}
                                        value="{{ $source['id'] }}">
                                        {{ ucfirst($source['name']) }}
                                    </option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col-12">
                            <label class="form-label" for="name">Supplier</label><span class="text-danger">*</span>
                            <select name="supplier_id" class="select2 form-select" data-placeholder="Select Supplier"
                                id="supplier_id_edit" required>
                                <option disabled value="" selected>Select Supplier</option>
                                @foreach ($suppliers as $supplier)
                                    <option value="{{ $supplier->id }}">{{ ucfirst($supplier->name) }}
                                        {{ $supplier->code }}
                                    </option>
                                @endforeach
                            </select>
                            <span class="text-danger error-message"></span>
                        </div>
                        <div class="col-12">
                            <label class="form-label" for="name">Advance</label><span class="text-danger">*</span>
                            <input required type="text" required id="advance_edit" class="form-control"
                                name="advance" placeholder="Advance">
                            <span class="text-danger error-message"></span>
                        </div>
                        <div class="col-12">
                            <label class="form-label" for="name">No of Instalments</label><span
                                class="text-danger">*</span>
                            <input required type="number" required id="instalments_edit" class="form-control"
                                name="instalments" placeholder="Instalments">
                            <span class="text-danger error-message"></span>
                        </div>
                        <div class="col-12">
                            <label class="form-label" for="name">W.E.F</label><span class="text-danger">*</span>
                            <input required type="date" required id="wef_edit" class="form-control" name="wef"
                                placeholder="W.E.F">
                            <span class="text-danger error-message"></span>
                        </div>
                        <div class="row">
                            <div class="col-12 text-center">
                                <button type="submit" id="updateForm" class="btn btn-primary me-1">Submit</button>
                                <button type="reset" class="btn btn-outline-secondary">Reset</button>
                            </div>
                        </div>
                    </form>
                </div>

            </div>
        </div>
    </div>
@endsection


@section('vendor-script')
    {{-- vendor files table data --}}
    <script src="{{ asset('vendors/js/tables/datatable/jquery.dataTables.min.js') }}"></script>
    <script src="{{ asset('vendors/js/tables/datatable/dataTables.bootstrap5.min.js') }}"></script>
    <script src="{{ asset('vendors/js/tables/datatable/datatables.buttons.min.js') }}"></script>
    <script src="{{ asset('vendors/js/tables/datatable/buttons.bootstrap5.min.js') }}"></script>
    <script src="{{ asset('vendors/js/extensions/sweetalert2.all.min.js') }}"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/js/select2.min.js"></script>
@endsection
@section('page-script')
    <script src="{{ asset('/js/custom.js') }}"></script>
    <script>
        $(document).ready(function() {
            $('.select2').select2();
            $("#supplier_id").select2({
                dropdownParent: $('#addModal .modal-content')
            });
        });
        $('#advance_table').DataTable({
            processing: true,
            serverSide: true,
            searching: true,
            paging: true,
            ajax: {
                url: "{{ route('milk-advance.index') }}",
                data: function(d) {
                    d.page = (d.start / d.length) + 1; // DataTables calculates the page number based on start
                    d.length = d.length; // Page length (number of rows per page)
                    d.search = d.search.value;
                }
            },
            columns: [{
                    data: 'code',
                    name: 'code',
                    className: 'text-center'
                },
                {
                    data: 'supplier',
                    name: 'supplier',
                    className: 'text-left'
                },
                {
                    data: 'region',
                    name: 'region',
                    className: 'text-left'
                },
                {
                    data: 'collection_point',
                    name: 'collection_point',
                    className: 'text-left'
                },
                {
                    data: 'source',
                    name: 'source',
                    className: 'text-left'
                },
                {
                    data: 'advance',
                    name: 'advance',
                    className: 'text-end'
                },
                {
                    data: 'instalments',
                    name: 'instalments',
                    className: 'text-end'
                },
                {
                    data: 'wef',
                    name: 'wef',
                    className: 'text-center'
                },
                {
                    data: 'created_by',
                    name: 'created_by',
                    className: 'text-left'
                },
                {
                    data: 'action',
                    name: 'action',
                    className: 'text-center'
                },
            ],
            // dom: '<"d-flex justify-content-between align-items-center header-actions text-nowrap mx-1 row mt-75"' +
            //     '<"col-sm-12 col-lg-4 d-flex justify-content-center justify-content-lg-start" l>' +
            //     '<"col-sm-12 col-lg-8"<"dt-action-buttons d-flex align-items-center justify-content-lg-end justify-content-center flex-md-nowrap flex-wrap"<"me-1"f>>>' +
            //     '><"text-nowrap" t>' +
            //     '<"d-flex justify-content-between mx-2 row mb-1"' +
            //     '<"col-sm-12 col-md-6"i>' +
            //     '<"col-sm-12 col-md-6"p>' +
            //     '>',
            dom: '<"d-flex justify-content-between align-items-center header-actions text-nowrap mx-1 row mt-75"' +
                '<"col-sm-12 col-lg-4 d-flex justify-content-center justify-content-lg-start" l>' +
                '<"col-sm-12 col-lg-8 dt-action-buttons d-flex flex-column align-items-end justify-content-end"' +
                    '<" me-1"B>' + // Buttons on top
                    '<"me-1"f>' + // Search bar below
                '>' +
            '>' +
            '<"text-nowrap" t>' +
            '<"d-flex justify-content-between mx-2 row mb-1"' +
                '<"col-sm-12 col-md-6"i>' +
                '<"col-sm-12 col-md-6"p>' +
            '>',
            buttons: [
                {
                    extend: 'excelHtml5',
                    text: '<i class="fas fa-file-excel excel-file"></i> Excel Export',
                    className: 'custom-excel-btn',
                    exportOptions: {
                    columns: [0, 1, 2, 3, 4, 5, 6, 7, 8], // use index 5 = status_text (not status)
                    // modifier: {
                    //   page: 'current' // only export current page
                    // }
                    }
                }
            ],
            language: {
                paginate: {
                    // remove previous & next text from pagination
                    previous: '&nbsp;',
                    next: '&nbsp;'
                }
            }
        });

        $(document).on('submit', '#addForm', function(e) {
            $(".error-message").text('');
            e.preventDefault();
            let data = $(this).serialize();
            let url = $(this).attr('action');
            let method = $(this).attr('method');
            $.ajax({
                url: url,
                method: method,
                data: data,
                success: function(response) {
                    if (response.success) {
                        $('#addModal').modal('toggle');
                        Swal.fire(
                            'Done!',
                            response.message,
                            'success'
                        )
                        $('#addForm')[0].reset();
                        $('#advance_table').DataTable().ajax.reload();
                    } else {
                        $("#" + response.key).nextAll('.error-message').text(response.message);
                        Swal.fire(
                            'Error!',
                            response.message,
                            'error'
                        )
                    }
                },
            });
        });

        function editRecord(id, supplier_id, advance, instalments, region_id, source_type, wef) {
            $("#id").val(id);
            $("#supplier_id_edit").val(supplier_id).trigger('change');
            $('#region_id_edit').val(region_id).trigger('change');
            $('#source_id_edit').val(source_type).trigger('change');
            $("#instalments_edit").val(instalments);
            $("#advance_edit").val(advance);
            $("#wef_edit").val(wef);
        }

        $(document).on('submit', '#editForm', function(e) {
            e.preventDefault();
            let data = $(this).serialize();
            let id = $("#id").val();
            console.log(id);
            $.ajax({
                url: "{{ route('milk-advance.update', ':id') }}".replace(':id', id),
                method: 'PUT',
                data: data,
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                success: function(response) {
                    if (response.success) {
                        $('#editForm')[0].reset();
                        $('#advance_table').DataTable().ajax.reload();
                        $('#editModal').modal('toggle');
                        Swal.fire(
                            'Done!',
                            response.message,
                            'success'
                        )
                    } else {
                        Swal.fire(
                            'Oops!',
                            response.message,
                            'error'
                        )
                    }
                }
            });
        });

        $("#source_id, #region_id").change(function() {
            let source_id = $("#source_id option:selected").attr('value');
            let region_id = $("#region_id option:selected").attr('value');
            $.ajax({
                type: "get",
                data: {
                    source_id: source_id,
                    region_id: region_id
                },
                url: '{{ route('get.suppliers') }}',
                success: function(data) {
                    if (data.success == true) {
                        $('#supplier_id').html(data.data);
                    }
                },
                error: function(jqXhr, textStatus, errorMessage) {
                    alert('Error Occurred')
                }

            });
        });

        // $("#source_id_edit, #region_id_edit").change(function() {
        //     let source_id = $("#source_id_edit option:selected").attr('value');
        //     let region_id = $("#region_id_edit option:selected").attr('value');
        //     $.ajax({
        //         type: "get",
        //         data: {
        //             source_id: source_id_edit,
        //             region_id: region_id_edit
        //         },
        //         url: '{{ route('get.suppliers') }}',
        //         success: function(data) {
        //             if (data.success == true) {
        //                 $('#supplier_id_edit').html(data.data);
        //             }
        //         },
        //         error: function(jqXhr, textStatus, errorMessage) {
        //             alert('Error Occurred')
        //         }

        //     });
        // });
    </script>
@endsection