@extends('admin.layouts.app')
@section('title', ucfirst($type).' Return List')
@push('styles')
    <link rel="stylesheet" href="https://cdn.datatables.net/2.2.2/css/dataTables.dataTables.css" />

@endpush
@section('container')
    <!-- Page-Title -->
    <div class="row">
        <div class="col-sm-12">
            <div class="page-title-box">
                <div class="float-end">
                    <a href="{{ route('return-note-book.create',['type'=>$type]) }}" class="btn btn-primary">Create {{ ucfirst($type) }} Return Note Book</a>
                </div>
                <h4 class="page-title">{{ ucfirst($type) }} Return Note Book List</h4>
            </div>
            <!--end page-title-box-->
        </div>
        <!--end col-->
    </div>
    <!-- end page title end breadcrumb -->

    <div class="row">
        @if (session('success'))
            <div class="alert alert-info">
                {{ session('success') }}
            </div>
        @endif
        @if (session('error'))
            <div class="alert alert-danger">
                {{ session('error') }}
            </div>
        @endif
    </div>
    <div class="row">
        <div class="col-md-12">
            <div class="card">
                <div class="card-header">
                    <div class="row">
                        <div class="form-group col-md-3">
                            <label>{{ $type == 'sale' ? 'Client' : 'Supplier' }}</label>
                            <select name="party" id="party" class="form-select default-select">
                                <option value="">All</option>
                                @foreach ($parties as $party)
                                    <option value="{{ $party->id }}">
                                        {{ $party->name }}
                                        @if($party->address)
                                            - {{ $party->address }}
                                        @endif
                                    </option>
                                @endforeach
                            </select>
                        </div>
                        <div class="form-group col-md-3">
                            <label>Start Date</label>
                            <input type="date" class="form-control" id="start_date" value="{{ request('start_date') }}" name="start_date">
                        </div>
                        <div class="form-group col-md-3">
                            <label>End Date</label>
                            <input type="date" class="form-control" id="end_date" value="{{ request('end_date') }}" name="end_date">
                        </div>
                    </div>
                </div>
                <!--end card-header-->
                <div class="card-body">
                    <div class="table-responsive">
                        <table class="table table-bordered" id="table">
                            <thead>
                                <tr>
                                <th>Date</th>
                                @if($type == 'sale')
                                    <th>Client</th>
                                    <th>Product</th>
                                @endif
                                @if($type == 'purchase')
                                    <th>Supplier</th>
                                    <th>Item Code</th>
                                @endif
                                <th>Brand Name</th>
                                @if($type == 'purchase')
                                    <th>Group</th>
                                @endif
                                <th>Reason for return</th>
                                <th>Quantity</th>
                                <th>Price</th>
                                <th>Amount</th>
                                <th>Adjusted Date</th>
                                <th>Change product Name</th>
                            </tr>
                            </thead>
                        </table>
                    </div>
                </div>
                <!--end card-body-->
            </div>
            <!--end card-->
        </div> <!-- end col -->


    </div> <!-- end row -->
@endsection


@push('scripts')
    <script src="https://cdn.datatables.net/2.2.2/js/dataTables.js"></script>
    <script>
        var table = $('#table').DataTable({
            processing: true,
            serverSide: true,
            ajax: {
                url: "{{ route('return-note-book.datatable',['type'=>$type]) }}",
                type: "POST", // Change from GET to POST
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') // Ensure CSRF token is included
                },
                data: function (d) {
                    d.party = $("#party").val();
                    d.start_date = $("#start_date").val();
                    d.end_date = $("#end_date").val();
                }
            },
            "pagingType": "full_numbers",
            "lengthMenu": [[10, 25, 50, -1], [10, 25, 50, "All"]],
            columns: [
                {data: 'date', name: 'date'},
                @if($type == 'sale')
                {data: 'client_name', name: 'client.name'},
                {data: 'product_name', name: 'product.name'},
               @endif
               @if($type == 'purchase')
                {data: 'supplier_name', name: 'supplier.name'},
                {data: 'item_code', name: 'item_code'},
               @endif
                {data: 'brand_name', name: 'brand_name'},
                @if($type == 'purchase')
                    {data: 'group_name', name: 'group_name'},
                @endif
                {data: 'return_reason', name: 'return_reason'},
                {data: 'quantity', name: 'quantity'},
                {data: 'price', name: 'price'},
                {data: 'amount', name: 'amount'},
                {data: 'adjusted_date', name: 'adjusted_date'},
                {data: 'change_product_name', name: 'change_product_name'},
                {data: 'action', name: 'action', orderable: false},
            ],
            order: [[0, 'desc']],
            "responsive": true,
            "autoWidth": false,
            "colReorder": true,
        });
        $('#start_date,#end_date,#party').change(function () {
            table.ajax.reload();
        });

        $('body').on('click', '.btn-delete', function () {
            let id = $(this).data('id');
            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) {
                    $.ajax({
                        method: "DELETE",
                        url: "{{ route('return-note-book.destroy', ['return_note_book' => 'REPLACE_WITH_ID_HERE']) }}".replace('REPLACE_WITH_ID_HERE', id),
                        data: { id: id }
                    }).done(function( response ) {
                        if (response.success) {
                            Swal.fire(
                                'Deleted!',
                                response.message,
                                'success'
                            ).then((result) => {
                                location.reload();
                            });
                        } else {
                            Swal.fire({
                                icon: 'error',
                                title: 'Oops...',
                                text: response.message,
                            });
                        }
                    });

                }
            })

        });



        document.querySelectorAll('.default-select').forEach(function(element) {
            new Selectr(element);
        });
    </script>
@endpush