@extends('admin.layout.master')

@section('title')
    Add Sale
@endsection

@section('content')

    <style>
        .select2-selection__rendered {
            line-height: 45px !important;
        }

        .select2-container .select2-selection--single {
            height: 58px !important;
        }

        .select2-selection__arrow {
            height: 60px !important;
        }

        /* For modern browsers */
        input[type="number"] {
            -moz-appearance: textfield;
        }

        /* For Webkit browsers like Chrome and Safari */
        input[type="number"]::-webkit-inner-spin-button,
        input[type="number"]::-webkit-outer-spin-button {
            -webkit-appearance: none;
            margin: 0;
        }

        /* For Firefox */
        input[type="number"] {
            -moz-appearance: textfield;
        }


    </style>


    <div class="page-content">

        <nav class="page-breadcrumb">
            <ol class="breadcrumb">
                <li class="breadcrumb-item"><a href="{{ route('admin./') }}">Home</a></li>
                <li class="breadcrumb-item active" aria-current="page">Add Sale</li>
            </ol>
        </nav>

        <div class="row">
            <div class="col-md-12">
                @include('admin.layout.laravel_errors')
                <div class="card">
                    <div class="card-body">
                        <form method="POST" action="{{ route('admin.save_sale') }}" class="MyForm"
                              enctype="multipart/form-data">

                            {{ csrf_field() }}

                            <div class="row">
                                <div class="col-md-4"></div>
                                <div class="col-md-4">
                                    <div class="form-group">
                                        <label> Sale Date </label>
                                        <div class="input-group flatpickr" id="flatpickr-date">
                                            <input type="text" class="form-control MyInput" name="date" required
                                                   placeholder="Select date"
                                                   value="{{ Carbon\Carbon::now()->format('Y-m-d') }}"
                                                   data-input>
                                            <span class="input-group-text MyInput" data-toggle><i
                                                        data-feather="calendar"></i></span>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-4"></div>
                            </div>

                            <div class="row" id="MainData_">

                                <div class="col-md-3">
                                    <div class="form-group">
                                        <label> Select Product </label>
                                        <select name="subcategoryid[]" id="subcategoryid_0"
                                                onchange="SetLatestSalePrice(this.value,0)" class="form-control select2"
                                                required>
                                            <option value="" selected disabled>Select Product</option>
                                            @forelse($subcategories as $categoryy)
                                                <option value="{{ $categoryy->id }}">{{ $categoryy->category_data->name }}
                                                    - {{ $categoryy->name }}</option>
                                            @empty
                                            @endforelse
                                        </select>
                                    </div>
                                </div>

                                <div class="col-md-2">
                                    <div class="form-group">
                                        <label> Price </label>
                                        <input type="number" min="1" name="price[]" onkeyup="SetTotalPrice(0)"
                                               step="0.01"
                                               id="price_0" class="form-control MyInput"
                                               placeholder="Price" required>
                                    </div>
                                </div>
                                <div class="col-md-2">
                                    <div class="form-group">
                                        <label> Quantity </label>
                                        {{--                                        <input type="number" min="1" onkeyup="SetTotalPrice(0)" id="quantity_0"--}}
                                        {{--                                               name="quantity[]" class="form-control MyInput"--}}
                                        {{--                                               placeholder="Quantity" required>--}}
                                        <select onchange="SetTotalPrice(0)" id="quantity_0"
                                                name="quantity[]" class="form-control"
                                                required>
                                        </select>
                                    </div>
                                </div>
                                <div class="col-md-3">
                                    <div class="form-group">
                                        <label> Total Price </label>
                                        <input type="text" readonly name="total_price[]" id="total_price_0"
                                               class="form-control MyInput"
                                               placeholder="Total Price" required style="background-color: #f9f8f8">
                                    </div>
                                </div>
                                <div class="col-md-1">
                                    <div class="form-group">
                                        <label> Status </label>
                                        <select name="payment_status[]" class="form-control" required>
                                            <option value="1">Paid</option>
                                            <option value="0">Unpaid</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="col-md-1">
                                    <div class="form-group">
                                        <button class="btn btn-success w-100" type="button" onclick="AddMore()"
                                                style="margin-top: 20px;height: 60px;font-size: 18px;">ADD
                                        </button>
                                    </div>
                                </div>
                                <div class="col-md-12">
                                    <div class="form-group">
                                        <input type="text" class="form-control MyInput" name="sale_detail[]"
                                               placeholder="Write Detail (Optional)">
                                    </div>
                                </div>

                            </div>

                            <div id="AppendData"></div>

                            <div class="row">
                                <div class="col-md-12">
                                    <center>
                                        <button class="btn btn-outline-dark mt-4 MyButton" style="height:50px"> SUBMIT
                                        </button>
                                    </center>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>

@endsection
@section('script')

    <link rel="stylesheet" href="{{ URL::asset('admin/assets/vendors/sweetalert2/sweetalert2.min.css') }}">
    <script src="{{ URL::asset('admin/assets/vendors/sweetalert2/sweetalert2.min.js') }}"></script>
    <script src="{{ URL::asset('admin/assets/js/sweet-alert.js') }}"></script>

    <script>

        function SetTotalPrice(index) {
            var price = $("#price_" + index).val();
            var quantity = $("#quantity_" + index).val();
            var total = parseFloat(price) * parseFloat(quantity);
            $("#total_price_" + index).val(total.toFixed(2));
        }

        var count = 1;

        function AddMore() {
            var appendrecord = `<div class="row" id="MainData_` + count + `">

                                <div class="col-md-3">
                                    <div class="form-group">
                                        <label> Select Product </label>
                                        <select name="subcategoryid[]" id="subcategoryid_` + count + `" onchange="SetLatestSalePrice(this.value,` + count + `)" class="form-control select_` + count + `"
                                                required>
                                            <option value="" selected disabled>Select Product</option>
                                            @forelse($subcategories as $categoryy)
            <option value="{{ $categoryy->id }}">{{ $categoryy->category_data->name }}
            - {{ $categoryy->name }}</option>
                                                                                    @empty
            @endforelse
            </select>
        </div>
    </div>

    <div class="col-md-2">
        <div class="form-group">
            <label> Price </label>
            <input type="number" min="1" name="price[]" onkeyup="SetTotalPrice(` + count + `)" step="0.01"
                   id="price_` + count + `" class="form-control MyInput"
                                                           placeholder="Price" required>
                                                </div>
                                            </div>
                                            <div class="col-md-2">
                                                <div class="form-group">
                                                    <label> Quantity </label>
                                                           <select onchange="SetTotalPrice(` + count + `)" id="quantity_` + count + `"
                                                                name="quantity[]" class="form-control"
                                                                required>
                                                        </select>
                                                </div>
                                            </div>
                                            <div class="col-md-3">
                                                <div class="form-group">
                                                    <label> Total Price </label>
                                                    <input type="text" readonly name="total_price[]" id="total_price_` + count + `"
                                                           class="form-control MyInput"
                                                           placeholder="Total Price" required style="background-color: #f9f8f8">
                                                </div>
                                            </div>
                                            <div class="col-md-1">
                                                <div class="form-group">
                                                    <label> Status </label>
                                                    <select name="payment_status[]" class="form-control select2" required>
                                                        <option value="1">Paid</option>
                                                        <option value="0">Unpaid</option>
                                                    </select>
                                                </div>
                                            </div>
                                            <div class="col-md-1">
                                                <div class="form-group">
                                                    <button class="btn btn-danger w-100" type="button" onclick="Remove(` + count + `)"
                                                            style="margin-top: 20px;height: 60px;font-size: 13px;">Remove
                                                    </button>
                                                </div>
                                            </div>

                                            <div class="col-md-12">
                                                <div class="form-group">
                                                    <input type="text" class="form-control MyInput" name="sale_detail[]" placeholder="Write Detail (Optional)">
                                                </div>
                                            </div>

                                        </div>`;

            $("#AppendData").append(appendrecord);
            // $(".select_"+count).select2();
            $("#subcategoryid_" + count).select2().trigger('change');
            count++;
        }

        function Remove(id) {
            $("#MainData_" + id).remove();
            $(".select_" + id - 1).select2();

        }


        function SetLatestSalePrice(id, index) {
            $("#price_" + index).val("");
            $("#total_price_" + index).val("");
            $('#quantity_' + index).empty("");
            $.ajax({
                url: `{{ route('admin.get_latest_price', ['id' => ':id']) }}`.replace(':id', id),
                type: "GET",
                success: function (result) {
                    try {
                        $("#price_" + index).val(result['price']);
                        for (var i = 1; i <= result['remaining']; i++) {
                            // Create an option element
                            var option = $('<option></option>');

                            // Set the value and text for the option
                            option.val(i).text(i);

                            // Append the option to the dropdown
                            $('#quantity_' + index).append(option);
                        }
                        $('#quantity_' + index).select2();
                        SetTotalPrice(index)
                    } catch (exp) {
                        alert(exp.message);
                        return exp.message;
                    }
                }
            });
        }


    </script>

@endsection