@extends('admin.layouts.master')
@section('title', 'User Product Discount')

@section('content')
    <div class="container-fluid">

        <!-- start page title -->
        <div class="row">
            <div class="col-12">
                <div class="page-title-box d-sm-flex align-items-center justify-content-between">
                    <h4 class="mb-sm-0">User Product Discount</h4>

                    <div class="page-title-right">
                        <ol class="breadcrumb m-0">
                            <li class="breadcrumb-item"><a href="{{route('admin.product.index')}}">Products</a></li>
                            <li class="breadcrumb-item active">User Product Discount</li>
                        </ol>
                    </div>

                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-lg-12">
                <div class="card" id="userProductDiscounts">
                    <div class="card-header border-bottom-dashed">

                        <div class="row g-4 align-items-center">
                            <div class="col-sm">
                                <div>
                                    <h5 class="card-title mb-0">User Product Discount</h5>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="card-body border-bottom-dashed border-bottom">
                        <form method="GET" action="" id="fetchProductDiscountsForm">
                            @csrf
                            <div class="row g-3">
                                <!--end col-->
                                <div class="col-xl-12">
                                    <div class="row g-3">
                                        <div class="col-sm-4">
                                            <div>
                                                <select class="form-control" name="user_id" data-plugin="choices" data-choices
                                                    data-choices-search-false name="choices-single-default" id="userId">
                                                    <option value="">Select User</option>
                                                    @foreach ($users as $user)
                                                        <option value="{{ $user->id }}">{{ ucwords($user->first_name . ' ' . $user->last_name) }}</option>
                                                    @endforeach
                                                </select>
                                            </div>
                                        </div>
                                        <!--end col-->
                                        <div class="col-sm-4">
                                            <div>
                                                {{--  <label for="productIds">Products</label>  --}}
                                                <select class="form-control" name="product_ids[]" data-plugin="choices" data-choices
                                                    data-choices-search-false name="choices-single-default" id="productIds" multiple>
                                                    <option value="" disabled >Select Products</option>
                                                    @foreach ($products as $product)
                                                        <option value="{{ $product->id }}">{{ ucwords($product->name) }}</option>
                                                    @endforeach
                                                </select>
                                            </div>
                                        </div>
                                        <!--end col-->


                                        <div class="col-sm-4">
                                            <div>
                                                <button type="submit" class="btn btn-primary w-100">
                                                    <i class="ri-equalizer-fill me-2 align-bottom"></i>
                                                    Fetch
                                                </button>
                                            </div>
                                        </div>
                                        <!--end col-->
                                    </div>
                                </div>
                            </div>
                            <!--end row-->
                        </form>
                    </div>
                </div>
            </div>
            <!--end col-->
        </div>
        <form action="{{ route('admin.product.user.discount.store') }}" id="userProductDiscountsStoreForm">
            @csrf
            <input type="hidden" name="user_id" id="user_id">
            <div class="row">
                <div class="col-lg-12">
                    <div class="card">
                        <div class="card-header">
                            <h5 class="card-title mb-0">Products List</h5>
                        </div>
                        <div class="card-body">
                            <table class="display table table-bordered" style="width:100%">
                                <thead>
                                    <tr>
                                        <th> # </th>
                                        <th> Product Image</th>
                                        <th> Product Name</th>
                                        <th> Product Price</th>
                                        <th> Discounted Price</th>
                                    </tr>
                                </thead>
                                <tbody id="userProductDiscountsTbody">

                                </tbody>
                            </table>

                            <div class="row">
                                <div class="col-sm-12">
                                    <div class="text-sm-end">
                                        <button type="submit" class="btn btn-success w-md">Save</button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </form>
        <!-- end page title -->

    </div>
    <!-- container-fluid -->
@endsection
@section('js')
    <script>
        $(document).ready(function(){
            const productsDropdown = $('#productIds');
            const usersDropdown = $('#userId');
            const fetchProductDiscountsForm = $('#fetchProductDiscountsForm');
            const userProductDiscountsTbody = $('#userProductDiscountsTbody');
            const userProductDiscountsStoreForm = $('#userProductDiscountsStoreForm');

            fetchProductDiscountsForm.on('submit', function(e){
                e.preventDefault();

                const formData = $(this).serialize();
                const productIds = productsDropdown.val();
                const userId = usersDropdown.val();

                if(productIds.length === 0 || userId === ''){
                    Toast_.show('error', 'Please select atleast one product and user');
                    return;
                }

                $.ajax({
                    url: "{{ route('admin.product.user.discount.fetch') }}",
                    type: 'POST',
                    data: formData,
                    success: function(response){
                        if(response.html === ''){
                            Toast_.show('error', 'No products found');
                            return;
                        }
                        userProductDiscountsTbody.html('');
                        userProductDiscountsTbody.html(response.html);
                    },
                    error: function(error){
                        Toast_.show('error', 'Something went wrong');
                        console.log(error.responseJSON.errors)
                    }
                });
            });


            userProductDiscountsStoreForm.on('submit', function(e){
                e.preventDefault();

                let confrm = confirm('Are you sure you want to save?');
                if(!confrm){
                    return;
                }
                $('#user_id').val(usersDropdown.val());
                const formData = $(this).serialize();


                $.ajax({
                    url: "{{ route('admin.product.user.discount.store') }}",
                    type: 'POST',
                    data: formData,
                    success: function(response){
                        Toast_.show('success', response.message);
                    },
                    error: function(error){
                        Toast_.show('error', 'Something went wrong');
                        console.log(error.responseJSON.errors)
                    }
                });
            });



        });
    </script>
@endsection