@extends('layouts/contentLayoutMaster')

@section('title', 'Add Fixed Asset')

@section('vendor-style')
    {{-- vendor css files --}}
    <link rel="stylesheet" href="{{ asset('vendors/css/forms/select/select2.min.css') }}">
    <link rel="stylesheet" href="{{ asset('vendors/css/tables/datatable/dataTables.bootstrap5.min.css') }}">
    <link rel="stylesheet" href="{{ asset('vendors/css/tables/datatable/buttons.bootstrap5.min.css') }}">
    <link rel="stylesheet" href="{{ asset('vendors/css/extensions/sweetalert2.min.css') }}">
    <link rel="stylesheet" href="{{ asset('/css/custom.css') }}">
@endsection
@section('content')

    <!-- Column Search -->
    <section id="column-search-datatable">
        <div class="row">
            <div class="col-12">
                <div class="card">
                    <div class="row border-bottom py-2">
                        <div class="col-3">
                            <h4 class="card-title pt-1 my-auto ps-2">{{ $selectedStore ? $selectedStore->name : '' }}</h4>
                        </div>
                        <div class="col-6"></div>
                        {{-- <div class="col-3">
                            <a href="{{ route('price.created.export') }}" class="btn btn-primary my-auto">
                                Export Prices
                            </a>
                        </div> --}}
                    </div>
                    <div class="card-body">
                        @if ($success = Session::get('success'))
                        <div class="demo-spacing-0 mb-1 col-6">
                            <div class="alert alert-success alert-dismissible fade show" role="alert">
                                <div class="alert-body">{{ $success }}</div>
                                <button type="button" class="btn-close" data-bs-dismiss="alert"
                                    aria-label="Close"></button>
                            </div>
                        </div>
                    @endif
                    @if ($errorMessage = Session::get('errorMessage'))
                        <div class="demo-spacing-0 mb-1 col-6">
                            <div class="alert alert-danger alert-dismissible fade show" role="alert">
                                <div class="alert-body">{{ $errorMessage }}</div>
                                <button type="button" class="btn-close" data-bs-dismiss="alert"
                                    aria-label="Close"></button>
                            </div>
                        </div>
                    @endif
                        <form method="post" id="storeStockForm" style="position: relative">
                            @csrf
                                <div class="row ">
                                    <div class="col-4 pe-0">
                                        {{-- <label class="form-label">Select Store</label>
                                        <select id="store" name="store_id" data-placeholder="Store" class="select2 form-select" required>
                                            <option value="" selected disabled>Select Store</option>
                                            @foreach ($stores as $store)
                                                <option {{ $storeId == $store->_id ? 'selected' : '' }} value="{{ $store->id }}">
                                                    {{ ucfirst($store->name) }}
                                                </option>
                                            @endforeach
                                        </select> --}}
                                        <input type="hidden" id="store" name="store_id" value="{{ $storeId }}">
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-4 pe-0">
                                        <label class="form-label">Select Asset</label>
                                        <select id="item" name="item_id" data-placeholder="Asset" class="select2 form-select" 
                                            required>

                                            <option value="" selected disabled>Select Asset</option>
                                            
                                            @foreach ($items as $item)
                                                <option {{ old('item_id') == $item->_id ? 'selected' : '' }} value="{{ $item->_id }}">
                                                    {{ '(SAP-' . $item->sap_code .') ' . $item->code .' - '. ucfirst($item->name)}}
                                                </option>
                                            @endforeach

                                        </select>
                                    </div>
                                    {{-- <div class="col-2 pe-0">
                                        <label class="form-label" for="price">Price</label>
                                        <input type="number" min="0" id="price" class="form-control" style="font-weight:bold; color:rgb(41, 197, 69)" placeholder="Price"
                                            name="price" value="0" step="any" />
                                        @error('price')
                                            <span class="text-danger">{{ $message }}</span>
                                        @enderror
                                    </div> --}}
                                        <div class="col-1 pe-0 d-flex justify-content-start align-items-center" style="padding-top: 22px">
                                            <a class="btn btn-sm btn-secondary" style="min-width: 68px; padding:10px; position: absolute;top: -72px;right:0px" onclick="resetForm()">Reset</a>
                                            <input type="submit" value="Add" class="btn btn-sm btn-primary " id="storeStockButton">
                                        </div>
                                </div>
                        </form>
                    </div>
                    <div class="card-datatable table-responsive">
                        <table class="table" id="stock_table">
                            <thead>
                                <tr>
                                    <th>No.</th>
                                    <th>Store</th>
                                    <th>Code</th>
                                    <th>Sap Code</th>
                                    <th>Asset</th>
                                    <th>Purchase Date</th>
                                    
                                    {{-- <th>Price</th> --}}
                                    <th>Status</th>
                                    {{-- <th>Action</th> --}}
                                </tr>
                            </thead>
                        </table>
                    </div>
                </div>
            </div>
        </div>
        </div>
    </section>


@endsection

@section('vendor-script')

    <script src="{{ asset('vendors/js/forms/select/select2.full.min.js') }}"></script>
    <script src="{{ asset('vendors/js/tables/datatable/jquery.dataTables.min.js') }}"></script>
    <script src="{{ asset('vendors/js/tables/datatable/dataTables.bootstrap5.min.js') }}"></script>
    <script src="{{ asset('vendors/js/tables/datatable/datatables.buttons.min.js') }}"></script>
    <script src="{{ asset('vendors/js/tables/datatable/buttons.bootstrap5.min.js') }}"></script>
    <script src="{{ asset('vendors/js/extensions/sweetalert2.all.min.js') }}"></script>
    <script src="{{ asset('/js/custom.js') }}"></script>
    <script>
        $(document).ready(function() {
            $(".select2").select2({
                allowClear: true,
                // dropdownPosition: 'TOP'
            });
        });





        var table;
        $(document).ready(function() {

            $(".select2").select2({});
            table = $('#stock_table').DataTable({
                processing: true,
                serverSide: true,
                paging: true,
                ajax: {
                    // headers: {
                    //     'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    // },
                    url: "{{ route('inventory.get.fixed-store.stock') }}",
                    data: function(d) {
                        // '_token': '{{ csrf_token() }}',
                        d.page = (d.start / d.length) + 1; // DataTables calculates the page number based on start
                        d.length = d.length; // Page length (number of rows per page)
                        d.search = d.search.value;
                        d.id = $('#store').val();
                        // d.type = $('#type option:selected').val();
                        // d.area_office = $('#area_office option:selected').val();
                        // d.plant = $('#plant option:selected').val();
                        // d.serial_number = $('#serial_number').val();
                    }
                },
                columns: [{
                        data: 'DT_RowIndex',
                        name: 'DT_RowIndex'
                    },
                    {
                        data: 'store',
                        name: 'store'
                    },
                    {
                        data: 'code',
                        name: 'code'
                    },
                    {
                        data: 'sapCode',
                        name: 'sapCode'
                    },
                    {
                        data: 'item',
                        name: 'item'
                    },
                     {
                        data: 'purchase_date',
                        name: 'purchase_date'
                    },
                    // {
                    //     data: 'price',
                    //     name: 'price',
                    // },
                    {
                        data: 'status',
                        name: 'status',
                    },
                    // {
                    //     data: 'action',
                    //     name: 'action',
                    // }

                ],
                dom: '<"d-flex justify-content-between align-items-center header-actions text-nowrap mx-1 row mt-75"' +
                    '<"col-sm-12 col-lg-4 d-flex justify-content-center justify-content-lg-start" l>' +
                    '<"col-sm-12 col-lg-8"<"dt-action-buttons d-flex align-items-center justify-content-lg-end justify-content-center flex-md-nowrap flex-wrap"<"me-1"f>>>' +
                    '><"text-nowrap" t>' +
                    '<"d-flex justify-content-between mx-2 row mb-1"' +
                    '<"col-sm-12 col-md-6"i>' +
                    '<"col-sm-12 col-md-6"p>' +
                    '>',
                language: {
                    paginate: {
                        // remove previous & next text from pagination
                        previous: '&nbsp;',
                        next: '&nbsp;'
                    }
                }
            });
            $(".search-input").on('change', function() {
                table.ajax.reload();
            });
            $('#serial_number').on('input', function() {
                table.ajax.reload();
            });
        });





    function getDropdownData(input_id) {

        $('#price').val(0);
 
        $.ajax('{{ route('inventory.get.available-fixed-assets') }}', {
            type: 'get',
            data: {
                type: input_id
            },
            success: function(data) {
                if (data.success == true) {
                    console.log(data.data);
                    $('#' + input_id).html(data.data);
                }
            },
            error: function(jqXhr, textStatus, errorMessage) {
                alert('Error Occurred')
            }
        });
    }


    $('#storeStockForm').on('submit', function (e) {
            e.preventDefault(); // Prevent the default form submission
            
            let formData = $(this).serialize(); // Serialize form data

                var icon = 'info';
                var text = '<p>Do You really want to add this asset to your stock ?</p>';

            Swal.fire({
                title: 'Are you Sure?',
                html: text ,
                icon: icon,
                showCancelButton: true,
                confirmButtonColor: '#3085d6',
                cancelButtonColor: '#d33',
                confirmButtonText: 'Yes'
            }).then((result) => {
                if (result.isConfirmed) {
                    // Now disable the button after confirmation
                    var $btn = $('#storeStockButton');
                    $btn.prop('disabled', true).val('Adding...');

                    $.ajax({
                        url: "{{ route('inventory.fixed-store-stock.store') }}", // Your Laravel route
                        method: "POST",
                        data: formData,
                        success: function(response) {
                            if (response.success == true) {
                                showAlert('success', response.message);
                                $('#price').val(0);
                                getDropdownData('item');
                                $('#item').val('').trigger('change');
                                table.ajax.reload();

                            } else {
                                showAlert('error', response.message);
                            }
                            // Re-enable button after success or failure
                            $btn.prop('disabled', false).val('Add');
                        },
                        error: function(jqXhr, textStatus, errorMessage) {
                            alert('Error Occurred')
                            $btn.prop('disabled', false).val('Add');
                        }
                    });
                }
            })
        });


        function resetForm()
        {
            $('#price').val(0);
            $('#item').val('').trigger('change');
            table.ajax.reload();
        }
    
    </script>
@endsection