@extends('app')

@section('body')
    @php
        $path = 'personal_sale';
    @endphp
    <div class="page-inner">
        <div class="page-header">
            <h3 class="fw-bold mb-3">Personal Sale</h3>
            <ul class="breadcrumbs mb-3">
                <li class="nav-home">
                    <a href="{{ route('dashboard') }}">
                        <i class="icon-home"></i>
                    </a>
                </li>
                <li class="separator">
                    <i class="icon-arrow-right"></i>
                </li>
                <li class="nav-item">
                    <a href="{{ route('sale') }}">Personal Sales</a>
                </li>

            </ul>
        </div>
        <div class="row">
            <div class="col-md-12">
                <div class="card">
                    <div class="card-header">
                        <div class="card-title">Add Sales</div>
                    </div>
                    <div class="card-body">
                        <form action="{{ route('personal.sale.store') }}" method="post">
                            @csrf
                            <div class="container">
                                <div class="row">
                                    <div class="col-md-12 col-lg-6">
                                        <div class="form-group">
                                            <label for="datepicker">Date</label>
                                            <input type="text" class="form-control datepicker" id="datepicker"
                                                name="date" value="{{ date('d-m-Y') }}" required />
                                            @error('date')
                                                <div class="text-danger">{{ $message }}</div>
                                            @enderror
                                        </div>
                                    </div>
                                    <div class="col-md-12 col-lg-6">
                                        <div class="form-group">
                                            <label for="bill_no">Bill Number</label>
                                            <input type="text" class="form-control" id="bill_no" name="bill_no"
                                                required />
                                            @error('bill_no')
                                                <div class="text-danger">{{ $message }}</div>
                                            @enderror
                                        </div>
                                    </div>
                                </div>

                                <div class="card bg-secondary p-3 my-3 rounded">
                                    <div class="sale-list">
                                        <div class="list row">
                                            <div class="col-md-12 col-lg-4 tt">
                                                <div class="form-group">
                                                    <label for="category_id" class="text-light">Category</label>
                                                    <select class="form-control category_id_list" name="category_id[]"
                                                        id="category_id_list" required>
                                                        <option value="">Select</option>
                                                        @foreach ($category as $cat)
                                                            <option value="{{ $cat['id'] }}">{{ $cat['category_name'] }}
                                                            </option>
                                                        @endforeach
                                                    </select>
                                                    @error('category_id')
                                                        <div class="text-danger">{{ $message }}</div>
                                                    @enderror
                                                </div>
                                            </div>
                                            <div class="col-md-12 col-lg-4">
                                                <div class="form-group">
                                                    <label for="medicine_id" class="text-light">Medicine</label>
                                                    <span id="medicine_stock" class="text-danger"></span>
                                                    <select class="form-control search-select medicine_id_list"
                                                        name="medicine_id[]" id="medicine_id_list" required>
                                                        <option value="">Select</option>
                                                        @foreach ($medicines as $medicine)
                                                            <option value="{{ $medicine['id'] }}">{{ $medicine['name'] }} -
                                                                {{ $medicine['code'] }}</option>
                                                        @endforeach
                                                    </select>
                                                    @error('medicine_id')
                                                        <div class="text-danger">{{ $message }}</div>
                                                    @enderror
                                                </div>
                                            </div>
                                            <div class="col-md-12 col-lg-4">
                                                <div class="form-group">
                                                    <label for="price" class="text-light">Price</label>
                                                    <input type="text" class="form-control" id="price" name="price[]"
                                                        required />
                                                    @error('price')
                                                        <div class="text-danger">{{ $message }}</div>
                                                    @enderror
                                                </div>
                                            </div>
                                            <div class="col-md-12 col-lg-2">
                                                <div class="form-group">
                                                    <label for="loose" class="text-light">Loose</label>
                                                    <input type="checkbox" id="loose_checkbox" />
                                                    @error('loose')
                                                        <div class="text-danger">{{ $message }}</div>
                                                    @enderror
                                                </div>
                                            </div>
                                            <div class="col-md-12 col-lg-4">
                                                <div class="form-group">
                                                    <label for="quantity" class="text-light">Quantity</label>
                                                    <input type="text" class="form-control" id="quantity"
                                                        name="quantity[]" required />
                                                    @error('quantity')
                                                        <div class="text-danger">{{ $message }}</div>
                                                    @enderror
                                                </div>
                                            </div>
                                            <div class="col-md-12 col-lg-4">
                                                <div class="form-group">
                                                    <label for="total" class="text-light">Total</label>
                                                    <input type="text" class="form-control total" id="total"
                                                        name="total[]" required />
                                                    @error('total')
                                                        <div class="text-danger">{{ $message }}</div>
                                                    @enderror
                                                </div>
                                            </div>
                                            <input type="hidden" id="value" name="value[]" />
                                            <input type="hidden" id="loose" name="loose[]" value="false" />
                                            <div
                                                class="col-md-12 col-lg-2 d-flex align-items-center gap-1 justify-content-end">
                                                <button class="btn btn-success" type="button" onclick="add()">+</button>
                                                <button class="btn btn-danger" type="button"
                                                    onclick="remove(event)">-</button>
                                            </div>
                                        </div>


                                    </div>
                                </div>
                                <div class="row justify-content-end">
                                    <div class="col-md-12 col-lg-6">
                                        <div class="form-group ">
                                            <h3>Total Amount : <span id="total-amount"> 0</span> </h3>
                                        </div>
                                    </div>
                                </div>


                                <div class="row align-items-center text-left">
                                    <div class="col-md-12">
                                        <button class="btn btn-success" type="submit">Submit</button>
                                    </div>
                                </div>
                            </div>


                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script script src="{{ asset('assets/js/core/jquery-3.7.1.min.js') }}"></script>
    <script>
        function add() {
            var div = `
    <div class="list row">
        <div class="col-md-12 col-lg-4 tt">
            <div class="form-group">
                <label for="category_id" class="text-light">Category</label>
                <select class="form-control category_id_list" name="category_id[]"
                    id="category_id_list" required>
                    <option value="">Select</option>
                    @foreach ($category as $cat)
                        <option value="{{ $cat['id'] }}">{{ $cat['category_name'] }}
                        </option>
                    @endforeach
                </select>
                @error('category_id')
                    <div class="text-danger">{{ $message }}</div>
                @enderror
            </div>
        </div>
        <div class="col-md-12 col-lg-4">
            <div class="form-group">
                <label for="medicine_id" class="text-light">Medicine</label>
                <span id="medicine_stock" class="text-danger"></span>
                <select class="form-control search-select medicine_id_list"
                    name="medicine_id[]" id="medicine_id_list" required>
                    <option value="">Select</option>
                    @foreach ($medicines as $medicine)
                        <option value="{{ $medicine['id'] }}">{{ $medicine['name'] }} -
                            {{ $medicine['code'] }}</option>
                    @endforeach
                </select>
                @error('medicine_id')
                    <div class="text-danger">{{ $message }}</div>
                @enderror
            </div>
        </div>
        <div class="col-md-12 col-lg-4">
            <div class="form-group">
                <label for="price" class="text-light">Price</label>
                <input type="text" class="form-control" id="price" name="price[]"
                    required />
                @error('price')
                    <div class="text-danger">{{ $message }}</div>
                @enderror
            </div>
        </div>
        <div class="col-md-12 col-lg-2">
            <div class="form-group">
                <label for="loose" class="text-light">Loose</label>
               <input type="checkbox" id="loose_checkbox" />
                @error('loose')
                    <div class="text-danger">{{ $message }}</div>
                @enderror
            </div>
        </div>
        <div class="col-md-12 col-lg-4">
            <div class="form-group">
                <label for="quantity" class="text-light">Quantity</label>
                <input type="text" class="form-control" id="quantity"
                    name="quantity[]" required />
                @error('quantity')
                    <div class="text-danger">{{ $message }}</div>
                @enderror
            </div>
        </div>
        <div class="col-md-12 col-lg-4">
            <div class="form-group">
                <label for="total" class="text-light">Total</label>
                <input type="text" class="form-control total" id="total" name="total[]"
                    required />
                @error('total')
                    <div class="text-danger">{{ $message }}</div>
                @enderror
            </div>
        </div>
        <input type="hidden" id="loose" name="loose[]" value="false" />
        <input type="hidden" id="value" name="value[]" />
        <div
            class="col-md-12 col-lg-2 d-flex align-items-center gap-1 justify-content-end">
            <button class="btn btn-success" type="button" onclick="add()">+</button>
            <button class="btn btn-danger" type="button"
                onclick="remove(event)">-</button>
        </div>
    </div>`;
            $('.sale-list').append(div);
        }


        function grandTotal() {
            var grandTotal = 0;
            $('.total').each(function() {
                // totals.push($(this).val());

                grandTotal += parseInt(($(this).val() == "" ? 0 : $(this).val()))

            });
            $('#total-amount').html(grandTotal);

        }

        function remove(e) {
            $(e.target).closest('.list').remove();
        }

        $(document).ready(function() {

            $('body').on('change', ".category_id_list", function() {

                var category_id = $(this).val();
                var cat = $(this).parent().parent().parent()
                $(cat).find(".medicine_id_list").html("")
                $(cat).find("#price").val("")
                $(cat).find("#quantity").val("")
                $(cat).find("#total").val("")
                $(cat).find("#value").val("")
                $(cat).find("#medicine_stock").html("");

                $.ajax({
                    type: "POST",
                    url: "{{ route('category.medicine') }}", // Replace with your API endpoint
                    data: JSON.stringify({
                        category_id: category_id,
                        _token: $('meta[name="csrf-token"]').attr(
                            'content') // Include the CSRF token as a parameter
                    }),
                    contentType: "application/json; charset=utf-8",
                    dataType: "json",
                    success: function(response) {
                        var div_data = "<option value=''>Select</option>";
                        $.each(response, function(key, val) {
                            div_data += "<option value='" + val.id + "'>" + val.name +
                                "</option>";
                        });

                        $(cat).find("#medicine_id_list").html(div_data);

                    }
                });
                grandTotal();


            });



            $('body').on('change', ".medicine_id_list", function() {

                var medicine_id = $(this).val();
                var medicine = $(this).parent().parent().parent()
                $(medicine).find("#price").val("")
                $(medicine).find("#quantity").val("")
                $(medicine).find("#total").val("")
                $(medicine).find("#value").val("")
                $(medicine).find("#medicine_stock").html("");


                $.ajax({
                    type: "POST",
                    url: "{{ route('medicine.stock') }}", // Replace with your API endpoint
                    data: JSON.stringify({
                        medicine_id: medicine_id,
                        _token: $('meta[name="csrf-token"]').attr(
                            'content') // Include the CSRF token as a parameter
                    }),
                    contentType: "application/json; charset=utf-8",
                    dataType: "json",
                    success: function(response) {
                        $(medicine).find("#medicine_stock").html(
                            " Balance Stock: " +
                            response.stock / response.quantity);
                        $(medicine).find("#quantity").attr('max',
                            response.stock / response.quantity);
                        $(medicine).find("#price").val(response
                            .price);
                        $(medicine).find("#value").val(response.quantity)


                    }
                });
                grandTotal();


            });


            $('body').on('change', "#quantity", function() {
                $(medicine).find("#price").val("")
                $(medicine).find("#total").val("")
                var quantity = $(this).val();
                var quantityDiv = $(this);
                var price = $(quantityDiv).parent().parent().parent().find("#price").val();
                var value = $(quantityDiv).parent().parent().parent().find("#value").val();
                var loose = $(quantityDiv).parent().parent().parent().find("#loose").val();

                if (loose == "true") {
                    var unitValue = price / value;
                    var total = Math.round(quantity * unitValue);
                } else if (loose == "false") {
                    var total = quantity * price;
                }


                $(quantityDiv).parent().parent().parent().find("#total").val(total);

                grandTotal();


            });

            $('body').on('change', "#loose_checkbox", function() {
                var checkbox = $(this).parent().parent().parent()
                var checked = $(this).is(':checked');
                $(checkbox).find('#loose').val(checked);

                var price = $(checkbox).find("#price").val();
                var quantity = $(checkbox).find("#quantity").val();
                var value = $(checkbox).find("#value").val();
                var loose = $(checkbox).find("#loose").val();
                if (checked) {
                    var unitValue = price / value;
                    var total = Math.round(quantity * unitValue);
                } else {
                    var total = quantity * price;
                }
                $(checkbox).find("#total").val(total);

                grandTotal();




            });




        });
    </script>
@endsection