@extends('layouts.master')
@section('title', $title)

@section('content')
    @include($view . '.suppliermodal')
    <div class="main-body">
        <div class="page-wrapper">
            <div class="row">
                <div class="col-sm-12">
                    <div class="card">
                        <div class="card-header">
                            <div class="d-flex justify-content-between">
                                <h5>{{ $title }}</h5>
                            </div>
                        </div>

                        <div class="card-body">
                            <form class="needs-validation" novalidate data-action="{{ route($route . '.create', $id) }}"
                                method="post" id="form">
                                @csrf
                              <input type="hidden" name="id"
                                    value="{{ !empty($purchase) && $purchase?->id ? $purchase->id : '' }}" id="id">
                                <div class="row">
                                    <div class="col-6 mb-3">
                                        <label for="date" class="form-label"> Date <span>*</span></label>
                                  
                                     <input type="date" {{ old('date', isset($purchase) && $purchase->date ? $purchase->date : now()->format('Y-m-d')) }} readonly class="form-control input" name="date" id="date"
                                    required>

                                      
                                       

                                        <small class="text-danger errors"></small>
                                    </div>
                              
                                    <div class="col-6 mb-3">
                                        <label for="supplier" class="form-label"> Supplier <span>*</span></label>
                                        <select name="supplier" id="supplier" class="form-control domselect2 new input">
                                            <option value="">Select</option>
                                             <option value="New">➕ Add new Supplier</option>
                                            @foreach ($suppliers as $item)
                                                <option value="{{$item->id}}"{{ !empty($purchase) && $purchase?->supplier == $item->id ? 'selected' : '' }}>{{$item->name .' ' . $item?->contact}}</option>
                                            @endforeach
                                        </select>
                                        
                                        <small class="text-danger errors"></small>
                                    </div>
                                  
                                


                                    <div class="col-6 mb-3">
                                        <label for="store_id" class="form-label"> Store <span>*</span></label>
                                        <select name="store_id" id="store_id" class="form-control domselect2 input">
                                            <option value="">Select </option>
                                            @foreach ($stores as $item)
                                                <option value="{{ $item?->id }}" {{ !empty($purchase) && $purchase?->store_id == $item->id ? 'selected' : '' }}> {{ $item?->name }} </option>
                                            @endforeach
                                        </select>
                                        <small class="text-danger errors"></small>
                                    </div>
                                   
                                   

<table class="table table-striped table-inverse table-responsive" style="width: 100%">
    <thead class="thead-inverse">
        <tr>
            <th>#</th>
            <th>Product</th>
            <th>UOM</th>
            <th>Quantity</th>
            <th>U.cost</th>
            <th>Expire Date</th>
            <th></th>
        </tr>
    </thead>


    @php
    $total_cost = 0;
@endphp
@if (!empty($purchase) && count($purchase?->det))
        @foreach ($purchase?->det as $pro_det)
            @php

                                                    $total_cost += $pro_det?->quantity * $pro_det?->unit_price;
                                                @endphp
 <tbody id="elements">
        <tr>
            <td class="counter">1</td>
            <td scope="row">
                <div class="form-group">
                    <select name="product[]"
                    class="form-control domselect2 product input">
                        <option value=""> -- Select -- </option>
                        @foreach ($products as $item)
                           
                                <option value="{{ $item?->id }}"
                                                                            @if ($item?->id == $pro_det->product) {{ 'selected' }} @endif
                                                                            data-uom="{{ $item?->uom }}"
                                                                            data-uom_id="{{ $item?->uom_id }}">
                                                                            {{ $item->name}}
                                                                        </option>
                        @endforeach
                    </select>
                    <small class="text-danger errors"></small>
                </div>
            </td>
            <td>
                <div class="form-group">
                    <input type="text" value="{{$pro_det?->uom}}" class="form-control uom input d-none" name="uom[]"
                        placeholder="UOM" readonly>
                    <input type="text" value="{{$pro_det?->measurement?->name}}" class="form-control uom_text input" name="uom_text[]"
                        placeholder="UOM" readonly>
                    <small class="text-danger errors"></small>
                </div>
            </td>
            <td>
                <div class="form-group">
                    <input type="text" class="form-control quantity input" value="{{$pro_det?->quantity}}"
                        name="quantity[]" placeholder="quantity">
                    <small class="text-danger errors"></small>
                </div>
            </td>
            <td>
                <div class="form-group">
                    <input type="text" class="form-control unit_price input" value="{{$pro_det?->unit_price}}"
                        name="unit_price[]" placeholder="unit price">
                    <small class="text-danger errors"></small>
                </div>
            </td>


            <td>
                <div class="form-group">
                    <input type="date" class="form-control expire_date input" value="{{$pro_det?->expire_date}}"
                        name="expire_date[]" placeholder="unit price">
                    <small class="text-danger errors"></small>
                </div>
            </td>
           
            <td> <button type="button" name="" id=""
                    class="btn btn-sm btn-success btn-lg btn-block"
                    onclick="add(this)">+</button>
                    <button  type="button" name="" id=""
                                    class="btn btn-sm btn-danger btn-lg btn-block" onclick='remove(this)'>x</button>
            </td>
        </tr>

    </tbody>
    @endforeach
@else
 <tbody id="elements">
        <tr>
            <td class="counter">1</td>
            <td scope="row">
                <div class="form-group">
                    <select name="product[]"
                    class="form-control domselect2 product input">
                        <option value=""> -- Select -- </option>
                        @foreach ($products as $item)
                            <option value="{{ $item?->id }}"
                                data-uom="{{ $item?->uom }}" data-uom_id="{{ $item?->uom_id }}"> {{ $item->name }}
                            </option>
                        @endforeach
                    </select>
                    <small class="text-danger errors"></small>
                </div>
            </td>
            <td>
                <div class="form-group">
                    <input type="text" class="form-control uom input d-none" name="uom[]"
                        placeholder="UOM" readonly>
                    <input type="text" class="form-control uom_text input" name="uom_text[]"
                        placeholder="UOM" readonly>
                    <small class="text-danger errors"></small>
                </div>
            </td>
            <td>
                <div class="form-group">
                    <input type="text" class="form-control quantity input"
                        name="quantity[]" placeholder="quantity">
                    <small class="text-danger errors"></small>
                </div>
            </td>
            <td>
                <div class="form-group">
                    <input type="text" class="form-control unit_price input"
                        name="unit_price[]" placeholder="unit price">
                    <small class="text-danger errors"></small>
                </div>
            </td>


            <td>
                <div class="form-group">
                    <input type="date" class="form-control expire_date input"
                        name="expire_date[]" placeholder="unit price">
                    <small class="text-danger errors"></small>
                </div>
            </td>
           
            <td> <button type="button" name="" id=""
                    class="btn btn-sm btn-success btn-lg btn-block"
                    onclick="add(this)">+</button>
            </td>
        </tr>

    </tbody>
@endif

</table>

                                 

                               
                                    <div class="d-flex justify-content-end mt-3">
                                        <h4>Total: <span id="total">0</span></h4>
                                        <input type="hidden" name="totals" id="totals">
                                    </div>


                                   

                                </div>
                             
                                <div class="modal-footer mt-2">
                                    <a href="{{ route($route . '.index') }}" class="btn btn-secondary mx-2 text-white"><i
                                            class="fas fa-times mx-2"></i> {{ __('messages.btn_close') }}</a>
                                    <button type="submit" class="btn btn-success mx-2">
                                        <i class="fas fa-check mx-2"></i>
                                        {{ __('messages.btn_update') }}
                                    </button>
                                </div>
                                
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

@endsection


    @section('page_js')
        {{-- <script>
            document.addEventListener('DOMContentLoaded', function () {
                var dateInput = document.getElementById('date');
                var today = new Date();
                var yesterday = new Date(today);
            
                yesterday.setDate(yesterday.getDate() - 1);
            
                // Format dates as YYYY-MM-DD
                var formatDate = function(date) {
                    var d = new Date(date),
                        month = '' + (d.getMonth() + 1),
                        day = '' + d.getDate(),
                        year = d.getFullYear();
            
                    if (month.length < 2) 
                        month = '0' + month;
                    if (day.length < 2) 
                        day = '0' + day;
            
                    return [year, month, day].join('-');
                };
            
                // Set min and max attributes
                dateInput.setAttribute('min', formatDate(yesterday));
                dateInput.setAttribute('max', formatDate(today));
            });
            </script> --}}
        
        <script>
            $(function() {
                $(document).on("change", ".product", function() {
                    $(this).closest("tr").find(".uom").val($(this).find(':selected').data('uom_id'))
                    $(this).closest("tr").find(".uom_text").val($(this).find(':selected').data('uom'))
                })

                $(document).on("keyup", ".quantity, .unit_price", function() {
        let total = 0;
        $("#elements tr").each(function() {
            let quantity = parseFloat($(this).find(".quantity").val()) || 0;
            let unitPrice = parseFloat($(this).find(".unit_price").val()) || 0;
            total += quantity * unitPrice;
        });
        $("#total").html(total.toLocaleString());
        $("#totals").val(total);
    });

    var today = new Date();
        var dd = String(today.getDate()).padStart(2, '0');
        var mm = String(today.getMonth() + 1).padStart(2, '0'); // January is 0!
        var yyyy = today.getFullYear();
        
        today = yyyy + '-' + mm + '-' + dd;
    document.getElementById("date").value = today;

                $("#form").on("submit", async function(e) {
                    e.preventDefault()
                    data = objectifyForm($(this).serializeArray())
                    btn = $(this).find("button[type='submit']")
                    btn.prop("disabled", true)
                    $("#spinners").removeClass("d-none")
                    let res = await client($(this), '{{ route($route . '.create', $id= 0) }}', 'post', data)
                    $("#spinners").addClass("d-none")
                    btn.prop("disabled", false)
                    if (res && res.status == 200) {
                        Swal.fire({
                            text: res.data,
                            icon: "success",
                            buttonsStyling: !1,
                            confirmButtonText: "Ok, got it!",
                            customClass: {
                                confirmButton: "btn btn-primary",
                            },
                        });

                        setTimeout(() => {
                            location.replace("{{ route($route.".index") }}")
                        }, 500);
                    }
                })

            })









            const add = (element, label = '', name = '', placeholder = '', description = '') => {
                counter = $(".counter").length + 1
                let elements = $("#elements")

                products = @json($products ?? [])
                // products.forEach()

                let nw = `<tr>
                                <td class="counter">${counter}</td>
                                <td scope="row">
                                    <div class="form-group">
                                        <select name="product[]" class="form-control domselect2  product input">
                                            <option value=""> -- Select -- </option>
                                            @foreach ($products as $item)
                                                <option value="{{ $item?->id }}"   data-uom="{{ $item?->uom }}" data-uom_id="{{ $item?->uom_id }}"> {{ $item->name }}
                                                </option>
                                            @endforeach
                                        </select>
                                        <small class="text-danger errors"></small>
                                    </div>
                                </td>
                                <td>
                                    <div class="form-group">
                                        <input type="text" class="form-control uom input d-none" name="uom[]"
                                            placeholder="UOM" readonly>
                                        <input type="text" class="form-control uom_text input" name="uom_text[]"
                                            placeholder="UOM" readonly>
                                        <small class="text-danger errors"></small>
                                    </div>
                                </td>
                                <td>
                                    <div class="form-group">
                                        <input type="text" class="form-control quantity input" name="quantity[]"
                                            placeholder="quantity">
                                        <small class="text-danger errors"></small>
                                    </div>
                                </td>
                                <td>
                                    <div class="form-group">
                                        <input type="text" class="form-control unit_price input" name="unit_price[]"
                                            placeholder="unit price">
                                        <small class="text-danger errors"></small>
                                    </div>
                                </td>

                                   <td>
                <div class="form-group">
                    <input type="date" class="form-control expire_date input"
                        name="expire_date[]" placeholder="Expire Date">
                    <small class="text-danger errors"></small>
                </div>
            </td>
                                <td> <button type="button" name="" id=""
                                        class="btn btn-sm btn-success btn-lg btn-block mx-2"
                                        onclick="add(this)">+</button>
                                        <button
                                    type="button" name="" id=""
                                    class="btn btn-sm btn-danger btn-lg btn-block" onclick='remove(this)'>x</button>
                                </td>


                            </tr>`
                elements.append(nw)
                $(".domselect2").select2();
            }

            const remove = (element) => {
                $(element).parent().parent().remove()
                $(".counter").each((i, obj) => {
                    $(obj).text((i + 1))
                })
            }


                   $(document).on("change", ".new", function() {
            if ($(this).val() == "New") {
                triggeredElement = $(this)
                $("#addSupplierModal").modal("toggle")
                $(this).val('').trigger("change")
            }
        })



      $("#AddSupplierForm").on("submit", async function(e) {
    e.preventDefault();
    let data = objectifyForm($(this).serializeArray());
    let btn = $(this).find("button[type='submit']");
    
    btn.prop("disabled", true);
    $("#spinners").removeClass("d-none");

    let res = await client($(this), '{{ route($route . '.suppliercreate') }}', 'post', data);

    $("#spinners").addClass("d-none");
    btn.prop("disabled", false);

    if (res && res.status == 200) {
    let patientNamePhone = `${res.data.data.name} ${res.data.data.contact}`;
    console.log('waka' . patientNamePhone);
    $("#supplier").append(`<option value='${res.data.data.id}' selected>${patientNamePhone}</option>`);
    $("#addSupplierModal").modal("toggle");
}else if (res && res.status == 422) {
        // Handle validation errors (optional)
        console.log(res.errors);
        // Example: show first error for name and phone
        if(res.errors.name) alert(res.errors.name[0]);
        if(res.errors.phone) alert(res.errors.phone[0]);
    }
});



        </script>
    @endsection