@extends('layouts.app')
@push('css')
@endpush
@section('content')
    @include('includes.bread_crumb_with_header', [
        'header' => 'WholeSale Request',
        'bread_crumbs' => ['Dashboard' => url('/dashboard')],
    ])
    {{-- {{dd($wholesaleRequests)}} --}}
    <div id="kt_app_content_container" class="app-container">
        <!--begin::Inbox App - Messages -->
        <div class="d-flex flex-column flex-lg-row">
            <!--begin::Content-->
            <div class="flex-lg-row-fluid ms-lg-7 ms-xl-2">
                <!--begin::Card-->
                <div class="card">
                    <div class="card-header align-items-center py-5 gap-2 gap-md-5">
                        <!--begin::Actions-->
                        <div class="d-flex flex-wrap gap-2"></div>
                        <!--end::Actions-->
                        <!--begin::Actions-->
                        <div class="d-flex align-items-center flex-wrap gap-2">
                            <!--begin::Search-->
                            <div class="card-toolbar flex-row-fluid justify-content-end gap-5">
                                {{-- <button class="btn btn-success position-relative me-5 account-manager">My Account
                                    manager<span
                                        class="position-absolute top-0 start-0 translate-middle  fa-solid fa-crown text-warning fs-1"></span>
                                </button> --}}
                                <button type="button" id="create-wholesale-request" class="btn btn-primary">New
                                    Request
                                </button>
                            </div>
                            <!--end::Search-->
                        </div>
                        <!--end::Actions-->
                    </div>
                    <div class="card-body p-0">
                        <!--begin::Table-->
                        <div id="kt_inbox_listing_wrapper" class="dataTables_wrapper dt-bootstrap4 no-footer">
                            <div class="table-responsive">
                                <table
                                    class="table table-striped table-hover table-row-bordered fs-6 gy-5 my-0  no-footer"
                                    id="kt_inbox_listing">
                                    <thead>
                                        <th class="fw-bold">Date</th>
                                        <th class="fw-bold">Contact Number</th>
                                        <th class="fw-bold">Description</th>
                                        <th class="fw-bold">status</th>
                                    </thead>
                                    <!--begin::Table body-->
                                    {{-- @foreach ($tickets as $ticket) --}}
                                    <tbody>
                                        @foreach ($wholesaleRequests as $index => $wholesaleRequest)
                                            <tr class="view-wholesale" data-id="{{ $wholesaleRequest->id }}">

                                                <!--begin::Title-->
                                                {{-- <td>
                                                <div class="text-dark mb-1">
                                                    @foreach ($productVariants as $productVariant)
                                                        @if ($wholesaleRequest->product_variant_id == $productVariant['id'])
                                                            <span class="fw-bold">{{ $productVariant['name'] }}</span>
                                                        @endif
                                                    @endforeach
                                                </div>
                                            </td> --}}
                                                <td>
                                                    <div class="text-dark mb-1">
                                                        <span class="fw-bold">{{ $wholesaleRequest->date }}</span>
                                                        </a>
                                                    </div>
                                                </td>
                                                <td>
                                                    <div class="text-dark mb-1">
                                                        <span class="fw-bold">{{ $wholesaleRequest->phone_number }}</span>
                                                        </a>
                                                    </div>
                                                </td>
                                                <td>
                                                    <div class="text-dark mb-1">
                                                        <span
                                                            class="fw-bold">{{ substr($wholesaleRequest->message, 0, 50) . '...' }}</span>
                                                        </a>
                                                    </div>
                                                </td>
                                                <td>
                                                    @if ($wholesaleRequest->status == 0)
                                                        <span class="badge badge-light-primary">Open</span>
                                                    @elseif($wholesaleRequest->status == 1)
                                                        <span class="badge badge-light-warning">Quoted</span>
                                                    @elseif($wholesaleRequest->status == 2)
                                                        <span class="badge badge-light-success">Accepted</span>
                                                    @elseif($wholesaleRequest->status == 3)
                                                        <span class="badge badge-light-danger ">Rejected</span>
                                                    @endif
                                                </td>

                                            </tr>
                                        @endforeach
                                    </tbody>
                                    {{-- @endforeach --}}
                                </table>
                            </div>

                            <form id="quatation-actions" action="{{ route('seller.wholesale-requests.update', 5) }}"
                                method="post">
                                @csrf
                                <input class="form-check-input" name="id" type="hidden" value="">
                                <input class="form-check-input" id="quatation-id" name="status" type="hidden"
                                    value="">
                            </form>
                        </div>
                        <!--end::Table-->
                    </div>
                </div>
                <!--end::Card-->
            </div>
            <!--end::Content-->
        </div>
        <!--end::Inbox App - Messages -->
    </div>
@endsection
@push('script')
    <script>

        var modalId = 'modal';

        $(document).on('click', '#create-wholesale-request', async function() {
            const btn = $(this);
            $('#modal').show();
            const btnTitle = btn.html();
            try {
                loadButton(btn, 'Loading ...');
                let loadURL = `${baseUrl}/wholesale-requests/create`;
                await loadModal(modalId, loadURL);

                $('.selectProducts').select2({
                    dropdownParent: $('.modal')
                })
            } catch (err) {
                toast.error("Could not load create wholesale request popup. (error_ref: create_wholesale)");
                console.log("create_wholesale", err);
            } finally {
                resetButton(btn, btnTitle);
            }

        });

        var modalId = 'modal';
        $(document).on('click', '.view-wholesale', async function() {
            var id = $(this).attr('data-id');

            // console.log(id);
            const btn = $(this);
            const btnTitle = btn.html();
            try {
                // loadButton(btn, 'Loading ...');
                let loadURL = `${baseUrl}/wholesale-requests/` + id;
                await loadModal(modalId, loadURL);
            } catch (err) {
                toast.error("Could not load create wholesale request popup. (error_ref: create_wholesale)");
                console.log("create_wholesale", err);
            } finally {
                resetButton(btn, btnTitle);
            }

        });

        $(document).on('click', '.wholsesale', async function (e) {
            e.preventDefault();
            let form = $(this).closest('form');
            const btn = $(this);
            const btnTitle = btn.html();
            try {
                loadButton(btn);
                const url = ``;
                let ajaxRequest = new HttpRequest(url, 'POST');
                ajaxRequest.set_data_by_form_object(form);
                let response = await ajaxRequest.call();
                $("#" + modalId).modal("hide");
                toast.success(response.message);
                setTimeout(() => {
                    location.reload();
                }, 500);
            } catch (err) {
                toast.error(err);
            } finally {
                resetButton(btn, btnTitle);
            }
        });
    </script>
    <script>

        $(document).on("click", ".delete-current-product", function() {
            $(this).closest(".row").remove();
        });



        $(document).on({
            click: async function(e) {
                $('#quatation-id').val($(this).val());
                $('#quatation-actions [name="id"]').val($(this).attr('attr-id'));

                $('#modal').hide();
                e.preventDefault();
                let form = $('#quatation-actions');
                console.log(form);
                const btn = $(this);
                const btnTitle = btn.html();
                try {
                    loadButton(btn);
                    const url = "{{ route('seller.wholesale-requests.update', 5) }}";
                    let ajaxRequest = new HttpRequest(url, 'PUT');
                    ajaxRequest.set_data_by_form_object(form);
                    let response = await ajaxRequest.call();
                    $("#" + modalId).modal("hide");
                    toast.success(response.message);
                    setTimeout(function() {
                        location.reload();
                    }, 1000);
                } catch (err) {
                    toast.error(err);
                } finally {
                    resetButton(btn, btnTitle);
                }
            }
        }, '.btn-quatation-actions');



    </script>
@endpush