@extends('layouts.admin.master')
@section('title', 'Stock')

@section('vendor-style')
    <style type="text/css">
        .dt-buttons.btn-group{ position: relative; inset-inline-start: 0px; }
    </style>
@endsection

@section('vendor-script')

<script type="text/javascript">
$('.branch').select2({
    minimumResultsForSearch: '',
    width: '100%'
});

$(document).on('select2:open', function(e) {
    window.setTimeout(function () {
        document.querySelector('input.select2-search__field').focus();
    }, 0);
});

var url = '{{ route("product.stock.list.branch", ":id") }}';

$(document).on('change', '#branch', function(e){
    localStorage.setItem('branchID', $(this).val());
    url = url.replace(':id', $(this).val());
    location.href = url;
});

$(document).on('click', '.stockAdjust', function(e){
    var val = $(this).data('idval');
    var prodname = $(this).data('prodname');
    //localStorage.removeItem('rowid');
    localStorage.setItem('rowid', val);
    $('#primary_qty').val(0);
    $('#secondary_qty').val(0);
    $('#exampleModal').modal('show');
    $('#exampleModal h5').text(prodname);
});

$(document).on('click', '.updateStock', function(e){
    var primary_qty = $('#primary_qty').val();
    var secondary_qty = $('#secondary_qty').val();
    var row_id = localStorage.getItem('rowid');
    var branchID = localStorage.getItem('branchID');
    $.ajax({
        url: "{{route('stock.quantity.update')}}",
        type: "POST",
        data: {
            row_id: row_id,
            branchID: branchID,
            primary_qty: primary_qty,
            secondary_qty: secondary_qty,
            _token: '{{csrf_token()}}'
        },
        dataType: 'json',
        success: function (res) {
            if(res.success)
            {
                localStorage.removeItem('rowid');
                alert(res.message);
                window.location.reload();
            }
            else
            {
                alert(res.message);
            }
        }
    });
});
</script>

    @if(request()->id)
        <script type="text/javascript">
            var table = $('#datatable').DataTable({

                processing: true,
                serverSide: true,

               // ... skipped ...
               dom: '<"row mx-1"<"col-sm-12 col-md-3" l><"col-sm-12 col-md-9"<"dt-action-buttons text-xl-end text-lg-start text-md-end text-start d-flex align-items-center justify-content-md-end justify-content-center flex-wrap me-1"<"me-3"f>B>>>t<"row mx-2"<"col-sm-12 col-md-6"i><"col-sm-12 col-md-6"p>>',
                language: {
                    sLengthMenu: "_MENU_",
                    search: "Search",
                    searchPlaceholder: "Search.."
                },
                buttons: [],
                responsive: {
                    details: {
                        display: $.fn.dataTable.Responsive.display.modal({
                            header: function(e) {
                                return "Details of " + e.data().name
                            }
                        }),
                    }
                },
                "rowCallback": function (nRow, aData, iDisplayIndex) {
                    var oSettings = this.fnSettings();
                    $("td:first", nRow).html(oSettings._iDisplayStart+iDisplayIndex +1);
                    return nRow;
                },
                ajax: "{{route('product.stock.list.branchTable', request()->id)}}",
                columns: [
                    { data: 'id' },
                    { data: 'code' },
                    { data: 'name' },
                    { data: 'quantity' },
                    { data: 'buttons' },
                ]
            });
        </script>
    @endif
@endsection

@section('content')

<!-- PAGE-HEADER -->
<div class="page-header">
    <h1 class="page-title">Stock List</h1>
    <div>
        <ol class="breadcrumb">
            <li class="breadcrumb-item"><a href="javascript:void(0)">Masters</a></li>
            <li class="breadcrumb-item active" aria-current="page">Stock List</li>
        </ol>
    </div>
</div>
<!-- PAGE-HEADER END -->
<div class="p-2">
    @if(count($errors) > 0)
        <div class="alert alert-danger d-flex" role="alert"> <span class="badge badge-center rounded-pill bg-danger border-label-danger p-3 me-2"><i class="bx bx-store fs-6"></i></span>
            <div class="d-flex flex-column ps-1">
                <h6 class="alert-heading d-flex align-items-center fw-bold mb-1">Error!!</h6>
                @foreach ($errors->all() as $error)
                    <span>{{ $error }}</span>
                @endforeach
            </div>
        </div>
    @endif
    
    @if($message = Session::get('success'))
        <div class="alert alert-success d-flex align-items-center" role="alert"> <span class="badge badge-center rounded-pill bg-success border-label-success p-3 me-2"><i class="bx bx-desktop fs-6"></i></span>
            <div class="d-flex flex-column ps-1">
                <h6 class="alert-heading d-flex align-items-center fw-bold mb-0">{{ $message }}</h6>
            </div>
        </div>
    @endif
</div>
<!-- Permission Table -->
<div class="row"> 
    <div class="col-lg-5 col-md-12">
        <div class="card">
            <div class="card-body">
                <div class="col">
                    <label class="form-label" for="branch">Branch</label>
                    <select id="branch" name="branch" class="form-control branch" required>
                        <option value="">--Select--</option>
                        @foreach($companys as $company)
                        <option value="{{$company->id}}">{{$company->name}}</option>
                        @endforeach
                    </select>
                </div>
            </div>
        </div>
    </div>

    <div class="col-lg-7 col-md-12">
        <div class="card">
            @if(isset($companyBranch))
            <div class="card-header">
                <div class="card-title">Branch: {{ $companyBranch->name }} </div>
            </div>
            @endif
            <div class="card-body">
                <table class="table" id="datatable">
                    <thead>
                        <tr>
                            <th>#</th>
                            <th>Code</th>
                            <th>Name</th>
                            <th>Quantity</th>
                            <th></th>
                        </tr>
                    </thead>
                    <tbody></tbody>
                </table>
            </div>
        </div>
    </div>
</div>
<!--/ Permission Table -->

<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel"></h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <form>
                    @csrf
                    <div class="row">
                        <div class="col-6 mb-3">
                            <label class="form-label" for="primary_qty">Primary Quantity</label>
                            <input type="text" id="primary_qty" name="primary_qty" class="form-control" value="" placeholder="Primary Quantity" autofocus="">
                        </div>
                        <div class="col-6 mb-3">
                            <label class="form-label" for="secondary_qty">Secondary Qty</label>
                            <input type="text" id="secondary_qty" name="secondary_qty" class="form-control" value="" placeholder="Secondary Qty" autofocus="">
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary updateStock">Save changes</button>
            </div>
        </div>
    </div>
</div>
@endsection