@extends('layouts.app')

@section('title', \App\CPU\translate('Giveaway List'))
@push('css_or_js')
    <link rel="stylesheet" href="{{ asset('assets') }}/css/bootstrap-datepicker.min.css" />
@endpush

@section('content')
    <div id="kt_app_content" class="app-content flex-column-fluid">
        <div id="kt_app_content_container" class="app-container container-xxxl">
            @include('includes.breadcrumb', [
                'title' => 'Giveaway List',
                'model' => 'Giveaway',
                'sub_model' => 'List',
                'model_object' => null,
            ])
            <div class="card">
                <div class="card-header justify-content-end">
                    <div class="d-flex align-items-center gap-2 gap-lg-3">
                        @include('newIncludes.linkBtn', [
                            'route' => route('admin.giveaway.create'),
                            'title' => 'Create',
                            'classes' => 'btn btn-sm fw-bold btn-primary',
                        ])
                        @include('newIncludes.linkBtn', [
                            'route' => '#7',
                            'title' => 'Search',
                            'iconClass' => 'fas fa-search',
                            'classes' => 'filterBtn btn btn-sm fw-bold btn-primary',
                            'attributes' => [
                                'data-form_id' => 'searchForm',
                            ],
                        ])

                        @include('newIncludes.exportBtn', [
                            'route' => route(
                                'admin.giveaway.exportHeaders',
                                array_merge(['action' => 'export'], request()->all())),
                        ])

                        @include('newIncludes.modalOpenLink', [
                            'iconClass' => 'fas fa-plus',
                            'title' => 'Upload',
                            'id' => 'modalOpener',
                            'modal' => '#upload_giveaway_modal',
                            'classes' => 'btn-success',
                        ])
                    </div>
                </div>

                <div class="card-header justify-content-center pt-5">
                    <form class="row w-100" action="{{ url()->current() }}" method="GET" id="searchForm">
                        <div class="row col-12">
                            <div class="row col-12 align-items-center">
                                <div class="col-4 form-floating mb-7 p-1">
                                    @include('newIncludes.select', [
                                        'col' => '4',
                                        'name' => 'search_request_no',
                                        'id' => 'search_request_no',
                                        'label' => 'request number',
                                        'required' => false,
                                        'data' => $requests_no,
                                        'nested' => false,
                                    ])
                                </div>
                                <div class="col-4 form-floating mb-7 p-1">
                                    @include('newIncludes.select', [
                                        'col' => '4',
                                        'name' => 'search_status',
                                        'id' => 'search_status',
                                        'label' => 'Status',
                                        'required' => false,
                                        'data' => $statuses,
                                        'nested' => false,
                                    ])
                                </div>
                                <div class="col-4 form-floating mb-7 p-1">
                                    @include('newIncludes.select', [
                                        'name' => 'search_customer_no',
                                        'id' => 'search_customer_no',
                                        'data' => $customers,
                                        'label' => 'Customer No',
                                        'required' => false,
                                        'placeHolder' => 'Customer No',
                                        'optValue' => 'CUSTOMER_NUMBER',
                                        'optLabel' => 'name_with_number',
                                    ])
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
                <div class="card-body justify-content-center pt-5">
                    <div id="kt_customers_table_wrapper" class="dataTables_wrapper dt-bootstrap4 no-footer"
                        style="overflow-x:auto">
                        <table class="table align-middle table-row-dashed fs-6 gy-5 dataTable no-footer">
                            <thead>
                                <tr class="text-start text-gray-400 fw-bold fs-7  gs-0">
                                    {{-- <th>
                                        {{ \App\CPU\translate('Seq#') }}
                                    </th> --}}
                                    <th>{{ \App\CPU\translate('Request#') }}</th>
                                    <th>{{ \App\CPU\translate('vendor') }}</th>
                                    <th>{{ \App\CPU\translate('business') }}</th>
                                    <th>{{ \App\CPU\translate('Customer Number') }}</th>
                                    <th>{{ \App\CPU\translate('Bill To') }}</th>
                                    <th>{{ \App\CPU\translate('Type') }}</th>
                                    <th>{{ \App\CPU\translate('status') }}</th>
                                    <th>{{ \App\CPU\translate('Order Number') }}</th>
                                    {{-- <th>{{ \App\CPU\translate('Amount') }}</th> --}}
                                    <th>{{ \App\CPU\translate('Creation Date') }}</th>
                                    <th>{{ \App\CPU\translate('View Details') }}</th>
                                </tr>
                            </thead>
                            <tbody>
                                @if (!empty($giveaway))
                                    @foreach ($giveaway as $giveaway_index => $give)
                                        <tr>
                                            <td>{{ $give['request_no'] }}</td>
                                            <td>{{ $give['vendor'] }}</td>
                                            <td>{{ $give['business'] }}</td>
                                            <td>{{ $give['customer_no'] }}</td>
                                            <td>{{ $give['bill_to'] }}</td>
                                            <td>{{ $give['type'] }}</td>
                                            <td>{{ $give['status'] }}</td>
                                            <td>{{ $give['giveaway_order_number'] }}</td>
                                            {{-- <td>{{ $give->TotalAmount }}</td> --}}
                                            <td>{{ Carbon\Carbon::parse($give['created_at'])->format('d-m-Y') }}</td>
                                            <td>
                                                <a href="{{ route('admin.giveaway.details', $give['id']) }}"
                                                    class="btn btn-sm btn-icon btn-bg-light btn-active-color-primary w-30px h-30px">
                                                    @include('includes.detailsArrowIcon')
                                                </a>
                                            </td>
                                        </tr>
                                    @endforeach
                                @endif
                            </tbody>
                        </table>
                    </div>
                </div>
                <div class="table-responsive mt-4">
                </div>
            </div>
        </div>


        <div class="modal fade zIndexClass" id="upload_giveaway_modal" tabindex="-1" aria-hidden="true">
            <div class="modal-dialog modal-dialog-centered mw-900px">
                <div class="modal-content">
                    <div class="modal-header">
                        <h2>Upload Giveaway Request</h2>
                        <div class="btn btn-sm btn-icon btn-active-color-primary" data-bs-dismiss="modal">
                            @include('includes.closeIcon')
                        </div>
                    </div>
                    <div class="modal-body py-lg-10 px-lg-10">
                        <form class="add_new_form" action="{{ route('admin.giveaway.upload') }}" method="post"
                            enctype="multipart/form-data">
                            @csrf
                            <div class="flex-row-fluid py-lg-5 px-lg-15">
                                <button type="button" class="btn btn-primary" id="btnfile">
                                    @include('includes.uploadIcon') Upload File
                                </button>
                                <span id="fname"></span>
                                <div class="wrapper" style="display:none;">
                                    <input type="file" id="uplodfile" required name="giveawayFile" />
                                </div>
                                <div class="fs-7 text-muted downloadTemplateBtn" style="float:right">
                                    {{-- <a href="{{ asset('assets') }}/giveaway-upload-template.xlsx">Download
                                        Template</a> --}}
                                    <a href="{{ asset('assets') }}/Updated_giveaway-upload-template.xlsx">Download
                                        Template</a></div>

                                    </div>
                            </div>
                            <div class="flex-row-fluid py-lg-5 px-lg-15">
                                <div class="current" data-kt-stepper-element="content">
                                    <div class="row w-100">
                                        <div class="col-3 fv-row mb-10">
                                            @include('includes.vendorSelect', [
                                                'vendors' => $vendors,
                                                'required' => true,
                                                'id' => 'select_vendor_no',
                                            ])
                                        </div>
                                        <div class="col-3 fv-row mb-10">
                                            @include('includes.businessSelect', [
                                                'required' => false,
                                                'id' => 'select_business_2',
                                            ])
                                        </div>
                                        <div class="col-3 fv-row mb-10">
                                            @include('includes.select', [
                                                'name' => 'select_customer_no',
                                                'id' => 'select_customer_no_2',
                                                'data' => $customers,
                                                'label' => 'Customer No',
                                                'required' => true,
                                                'placeHolder' => 'Customer No',
                                                'optValue' => 'CUSTOMER_NUMBER',
                                                'optLabel' => 'name_with_number',
                                            ])
                                        </div>
                                        <div class="col-3 fv-row mb-10">
                                            @include('includes.select', [
                                                'name' => 'select_bill_to',
                                                'id' => 'select_bill_to',
                                                'data' => [],
                                                'label' => 'Bill To',
                                                'required' => true,
                                            ])
                                        </div>
                                        <div class="col-4 fv-row mb-10">
                                            @include('includes.select', [
                                                'name' => 'select_type',
                                                'id' => 'select_type',
                                                'data' => $giveawayTypes,
                                                'label' => 'Type',
                                                'required' => true,
                                                'placeHolder' => 'Type',
                                                'class' => 'select2select',
                                            ])
                                        </div>


                                        <div class="col-6">
                                            <label class="fs-6 fw-semibold mb-2">Note</label>
                                            <textarea class="form-control mb-3" rows="5" data-kt-element="input" name="note" placeholder="Type a Note"></textarea>
                                        </div>
                                    </div>
                                    <div class="col-md-12 form-group justify-content-end" style="max-height:45px;">
                                        <button type="submit" class="btn btn-primary px-4"
                                            id="sendNewContract">{{ \App\CPU\translate('Submit') }}</button>
                                    </div>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection
@push('script')
    <script>
        $('.filterBtn').on('click', function() {
            var form = $(this).data('form_id');
            $('#' + form).submit();
        });

        $('#upload_giveaway_modal').on('shown.bs.modal', function() {
            $('#select_vendor_no,#select_bill_to,#select_customer_no_2,#select_type,#select_business_2').select2({
                dropdownParent: $('#upload_giveaway_modal')
            });
        });

        $("#btnfile").click(function() {
            $("#uplodfile").click();
        });


        $("#uplodfile").change(function() {
            var file = $(this).val().replace(/C:\\fakepath\\/ig, '');
            $("#fname").text(file);
        });
        $(document).on('change', '#select_vendor_no', function() {
            var vendor = $(this).val();
            $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="_token"]').attr('content')
                }
            });
            // First AJAX request for business data
            $.ajax({
                url: "{{ route('admin.filter.vendor-business') }}",
                method: 'GET',
                data: {
                    vendor: vendor,
                },
                success: function(data) {
                    $('#select_business_2').empty();
                    $('#select_business_2').append(new Option('No select', 'no', true, true))
                    $(data).each(function(i, z) {
                        var select_business = '{{ $_GET['select_business'] ?? '' }}';
                        if (select_business != '' && select_business == z) {
                            $('#select_business_2').append(new Option(z, z, true, true))
                        } else {
                            $('#select_business_2').append(new Option(z, z, false, false))
                        }
                    })
                    $('#select_business_2').trigger('change');
                }
            });

            // Second AJAX request for items data
            $.ajax({
                url: "{{ route('admin.filter.select2-items') }}",
                method: 'GET',
                data: {
                    vendor: vendor,
                },
                success: function(data) {
                    $('.select_item_no, .select_item_to').each(function() {
                        const $select = $(this);
                        $select.empty(); // Clear old options

                        // Add a placeholder option
                        $select.append(new Option('Select an item', '', true, true)).trigger(
                            'change');

                        // Add new options
                        data.items.forEach(function(item) {
                            $select.append(new Option(item.ITEM_NO, item.ITEM_NO));
                        });
                        $select.select2();
                    });
                },

                error: function(xhr, status, error) {
                    console.error('Error fetching vendor items:', error);
                }
            });
        });
        $(document).on('change', '#select_customer_no_2', function() {
            var customer = $(this).val();
            $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="_token"]').attr('content')
                }
            });
            $.ajax({
                url: "{{ route('admin.filter.customer-bill-to') }}",
                method: 'get',
                data: {
                    customer: customer,
                },
                success: function(data) {
                    $('#select_bill_to').empty();
                    $(data).each(function(i, z) {
                        $('#select_bill_to').append(new Option(z, z, true, true))
                        $('#select_bill_to').trigger('change');
                    })
                }
            });
        });
    </script>
@endpush