@extends('layouts.master')
@section('css')
    <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" type="text/css" />
    <link href="{{ URL::asset('assets/libs/sweetalert2/sweetalert2.min.css') }}" rel="stylesheet" type="text/css" />
    <link rel="stylesheet"
        href="https://cdn.jsdelivr.net/npm/filepond-plugin-image-preview@4.6.12/dist/filepond-plugin-image-preview.min.css">
    <link href="
    https://cdn.jsdelivr.net/npm/filepond@4.30.6/dist/filepond.min.css
    " rel="stylesheet">
    <style>
        .error {
            color: red;
        }

        .select2-container .select2-search--inline .select2-search__field {
            margin-top: 9px !important;
        }

        .select2-container--default .select2-selection--multiple .select2-selection__choice__display {
            text-wrap: auto ! important;
        }

        .select2-selection.select2-selection--multiple {
            display: flex !important;
        }

        .card-body .col-md-3 {
            padding: 0 5px !important;
        }

        .card-body .col-md-2 {
            padding: 0 5px !important;
        }

        .card-body .col-md-1 {
            padding: 0 5px !important;
        }

        .card-body thead tr th {
            font-weight: 600;
        }

        .fr-nv-btm {
            margin-bottom: 10px !important;
        }

        .dt-buttons button {
            border-radius: 5px !important;
        }

        .daybk-rt-btns {
            display: flex;
            align-items: end;
            gap: 5px
        }
    </style>
@endsection
@section('title')
    FOC Details
@endsection
@section('content')
    <main>
        <div class="row">
            <div class="col-lg-12">
                <div class="card">
                    <div class="card-header d-flex align-items-center">
                        <h5 class="card-title mb-0 flex-grow-1">
                            FOC Free Qty
                        </h5>
                    </div>
                    <div class="card-body">
                        <form action="/admin/stock-items-foc-update/{{ $stockItem->id }}" method="POST" id="stock-foc-form"
                            autocomplete="off" class="needs-validation" novalidate>
                            @csrf
                            <div id="focContainer">
                                @isset($stockItem)
                                    @if ($stockItem->stockItemFocs->where('type', 0)->count() > 0)
                                        @foreach ($stockItem->stockItemFocs->where('type', 0) as $key => $stockItemFoc)
                                            <div class="row focRow" id="foc_row_{{ $key + 1 }}">
                                                <div class="col-md-3 col-sm-6 mb-2">
                                                    <input type="hidden" name="stock_item_foc_id[]"
                                                        value="{{ $stockItemFoc->id }}">
                                                    <div>
                                                        <label class="form-label" for="product-title-input">Unit</label>
                                                        <select class="form-select foc-unit" id="" name="unit[]">
                                                            <option value=""></option>
                                                            @foreach ($units as $unit)
                                                                <option value="{{ $unit->id }}"
                                                                    {{ isset($stockItemFoc) ? ($stockItemFoc->unit_id == $unit->id ? 'selected' : '') : '' }}>
                                                                    {{ $unit->symbol }}</option>
                                                            @endforeach
                                                        </select>
                                                    </div>
                                                </div>
                                                <div class="col-md-2 col-sm-6 mb-2">
                                                    <div>
                                                        <label class="form-label" for="product-title-input">Quantity</label>
                                                        <input class="form-control" type="number" placeholder="Enter quantity"
                                                            name="quantity[]" value={{ $stockItemFoc->quantity }}>
                                                    </div>
                                                </div>
                                                <div class="col-md-2 col-sm-6 mb-2">
                                                    <div>
                                                        <label class="form-label" for="product-title-input">Free
                                                            Quantity</label>
                                                        <input class="form-control" type="number" placeholder="Enter quantity"
                                                            name="free_qty[]" value={{ $stockItemFoc->free_qty }}>
                                                    </div>
                                                </div>
                                                <div class="col-md-1 daybk-rt-btns mb-2">
                                                    <button type="button" class="btn btn-danger btn-sm" id="removeFocRow"><i
                                                            class="las la-minus"></i></button>
                                                </div>
                                            </div>
                                        @endforeach
                                    @else
                                        <div class="row focRow" id="foc_row_1">
                                            <div class="col-md-3 col-sm-6 mb-2">
                                                <div>
                                                    <label class="form-label" for="product-title-input">Unit</label>
                                                    <select class="form-select foc-unit" id="" name="unit[]">
                                                        <option value=""></option>
                                                        @foreach ($units as $unit)
                                                            <option value="{{ $unit->id }}">
                                                                {{ $unit->symbol }}</option>
                                                        @endforeach
                                                    </select>
                                                </div>
                                            </div>
                                            <div class="col-md-2 col-sm-6 mb-2">
                                                <div>
                                                    <label class="form-label" for="product-title-input">Quantity</label>
                                                    <input class="form-control" type="number" placeholder="Enter quantity"
                                                        name="quantity[]">
                                                </div>
                                            </div>
                                            <div class="col-md-2 col-sm-6 mb-2">
                                                <div>
                                                    <label class="form-label" for="product-title-input">Free
                                                        Quantity</label>
                                                    <input class="form-control" type="number" placeholder="Enter Free quantity"
                                                        name="free_qty[]">
                                                </div>
                                            </div>
                                            <div class="col-md-1 daybk-rt-btns mb-2">
                                                <button type="button" class="btn btn-danger btn-sm" id="removeFocRow"><i
                                                        class="las la-minus"></i></button>
                                            </div>
                                        </div>
                                    @endif
                                @endisset
                            </div>
                            <div>
                                <div class="text-end">
                                    <button type="button" class="btn btn-primary" id="addFocRow"><i
                                            class="las la-plus"></i>Add</button>
                                    <button type="submit" class="btn btn-success">
                                        Submit
                                    </button>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
            <div class="col-lg-12">
                <div class="card">
                    <div class="card-header d-flex align-items-center">
                        <h5 class="card-title mb-0 flex-grow-1">
                            FOC Other Item
                        </h5>
                    </div>
                    <div class="card-body">
                        <form action="/admin/stock-items-foc-other-item-update/{{ $stockItem->id }}" method="POST"
                            id="stock-other-item-foc-form" autocomplete="off" class="needs-validation" novalidate>
                            @csrf
                            <div id="focOtherContainer">
                                @isset($stockItem)
                                    @if ($stockItem->stockItemFocs->where('type', 1)->count() > 0)
                                        @foreach ($stockItem->stockItemFocs->where('type', 1) as $key => $stockItemFoc)
                                            <div class="row focOtherRow" id="foc_other_row_{{ $key }}">
                                                <div class="col-md-2 col-sm-6 mb-2">
                                                    <input type="hidden" name="stock_item_foc_id[]"
                                                        value="{{ $stockItemFoc->id }}">
                                                    <div>
                                                        <label class="form-label" for="product-title-input">Unit</label>
                                                        <select class="form-select foc-unit" id="" name="unit[]">
                                                            <option value=""></option>
                                                            @foreach ($units as $unit)
                                                                <option value="{{ $unit->id }}"
                                                                    {{ isset($stockItemFoc) ? ($stockItemFoc->unit_id == $unit->id ? 'selected' : '') : '' }}>
                                                                    {{ $unit->symbol }}</option>
                                                            @endforeach
                                                        </select>
                                                    </div>
                                                </div>
                                                <div class="col-md-2 col-sm-6 mb-2">
                                                    <div>
                                                        <label class="form-label" for="product-title-input">Quantity</label>
                                                        <input class="form-control" type="number"
                                                            placeholder="Enter quantity" name="quantity[]"
                                                            value={{ $stockItemFoc->quantity }}>
                                                    </div>
                                                </div>
                                                <div class="col-md-3 col-sm-6 mb-2">
                                                    <div>
                                                        <label class="form-label" for="product-title-input">Item</label>
                                                        <select class="form-control stock-item" name="other_item[]"
                                                            onchange="fetchItemData({{ $key }})"
                                                            id="item_{{ $key }}">
                                                            <option value="">Select item</option>
                                                            <option value="{{ $stockItemFoc->other_item_id }}" selected>
                                                                {{ $stockItemFoc->otherItem->name }}
                                                            </option>
                                                        </select>
                                                    </div>
                                                </div>
                                                <div class="col-md-2 col-sm-6 mb-2">
                                                    <div>
                                                        <label class="form-label" for="product-title-input">Unit</label>
                                                        <select name="other_unit_id[]"
                                                            class="mousetrap form-control unit_change unit_{{ $key }}"
                                                            id="unit_change_{{ $key }}">
                                                            @php
                                                                $unitIds = $stockItemFoc->otherItem->itemUnits
                                                                    ->pluck('unit_id')
                                                                    ->toArray();
                                                                $otherUnits = \App\Models\Unit::where(
                                                                    'business_key',
                                                                    Auth::user()->business_key,
                                                                )
                                                                    ->whereIn('id', $unitIds)
                                                                    ->get();
                                                            @endphp
                                                            @foreach ($otherUnits as $unit)
                                                                <option value="{{ $unit->id }}"
                                                                    {{ $stockItemFoc->other_unit_id == $unit->id ? 'selected' : '' }}>
                                                                    {{ $unit->symbol }}</option>
                                                            @endforeach
                                                        </select>
                                                    </div>
                                                </div>
                                                <div class="col-md-2 col-sm-6 mb-2">
                                                    <div>
                                                        <label class="form-label" for="product-title-input">Free
                                                            Quantity</label>
                                                        <input class="form-control" type="number"
                                                            placeholder="Enter quantity" name="free_qty[]"
                                                            value={{ $stockItemFoc->free_qty }}>
                                                    </div>
                                                </div>
                                                <div class="col-md-1 daybk-rt-btns mb-2">
                                                    <button type="button" class="btn btn-danger btn-sm"
                                                        id="removeFocOtherRow"><i class="las la-minus"></i></button>
                                                </div>
                                            </div>
                                        @endforeach
                                        {{-- @else
                                        <div class="row focRow" id="foc_row_1">
                                            <div class="col-md-3 col-sm-6 mb-2">
                                                <div>
                                                    <label class="form-label" for="product-title-input">Unit</label>
                                                    <select class="form-select foc-unit" id="" name="unit[]">
                                                        <option value=""></option>
                                                        @foreach ($units as $unit)
                                                            <option value="{{ $unit->id }}">
                                                                {{ $unit->symbol }}</option>
                                                        @endforeach
                                                    </select>
                                                </div>
                                            </div>
                                            <div class="col-md-2 col-sm-6 mb-2">
                                                <div>
                                                    <label class="form-label" for="product-title-input">Quantity</label>
                                                    <input class="form-control" type="number" placeholder="Enter quantity"
                                                        name="quantity[]">
                                                </div>
                                            </div>
                                            <div class="col-md-2 col-sm-6 mb-2">
                                                <div>
                                                    <label class="form-label" for="product-title-input">Free
                                                        Quantity</label>
                                                    <input class="form-control" type="number"
                                                        placeholder="Enter Free quantity" name="free_qty[]">
                                                </div>
                                            </div>
                                            <div class="col-md-1 daybk-rt-btns mb-2">
                                                <button type="button" class="btn btn-danger btn-sm" id="removeFocRow"><i
                                                        class="las la-minus"></i></button>
                                            </div>
                                        </div> --}}
                                    @endif
                                @endisset
                            </div>
                            <div>
                                <div class="text-end">
                                    <button type="button" class="btn btn-primary" id="addFocOtherRow"><i
                                            class="las la-plus"></i>Add</button>
                                    <button type="submit" class="btn btn-success">
                                        Submit
                                    </button>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </main>
@endsection
@section('script')
    <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
    <script src="{{ URL::asset('/assets/libs/sweetalert2/sweetalert2.min.js') }}"></script>
    <script src="{{ URL::asset('/assets/js/app.min.js') }}"></script>
    <script src="{{ URL::asset('/assets/js/jquery.validate.min.js') }}"></script>
    <script>
        $(document).ready(function() {
            $('.foc-unit').select2({
                placeholder: 'Choose unit',
            });

            $('.stock-item').select2({
                placeholder: 'Select item',
                ajax: {
                    url: "/admin/get-stock-items",
                    type: "POST",
                    dataType: 'json',
                    delay: 250,
                    data: function(params) {
                        return {
                            _token: "{{ csrf_token() }}",
                            search: params.term,
                            page: params.page,
                        };
                    },
                    processResults: function(data, params) {
                        params.page = params.page || 1;
                        var results = data.data.map(function(item) {
                            var name = item.description != null ? item.name + ' (' + item
                                .description +
                                ')' : item.name;
                            return {
                                id: item.id,
                                text: name,
                            };
                        });

                        return {
                            results: results,
                            pagination: {
                                more: (params.page * data.per_page) < data.total
                            }
                        };
                    },
                    cache: true
                }
            });
            $('.unit_change').select2();

        });

        $(document).on('click', '#removeFocRow', function(e) {
            e.preventDefault();
            $(this).closest('.focRow').remove();
        });
        $(document).on('click', '#removeFocOtherRow', function(e) {
            e.preventDefault();
            $(this).closest('.focOtherRow').remove();
        });
        $(document).on('click', '#addFocRow', function(e) {
            e.preventDefault();
            let rowCount = $('.focRow').length;
            if (rowCount == "" || rowCount == undefined) {
                rowCount = 1;
            } else {
                rowCount = parseInt(rowCount) + parseInt(1);
            }
            var html = `<div class="row focRow" id="foc_row_${rowCount}">
                                            <div class="col-md-3 col-sm-6 mb-2">
                                                <div>
                                                    <label class="form-label" for="product-title-input">Unit</label>
                                                    <select class="form-select foc-unit" id="" name="unit[]">
                                                        <option value=""></option>
                                                        @foreach ($units as $unit)
                                                            <option value="{{ $unit->id }}">
                                                                {{ $unit->symbol }}</option>
                                                        @endforeach
                                                    </select>
                                                </div>
                                            </div>
                                            <div class="col-md-2 col-sm-6 mb-2">
                                                <div>
                                                    <label class="form-label" for="product-title-input">Quantity</label>
                                                    <input class="form-control" type="number" placeholder="Enter quantity"
                                                        name="quantity[]">
                                                </div>
                                            </div>
                                            <div class="col-md-2 col-sm-6 mb-2">
                                                <div>
                                                    <label class="form-label" for="product-title-input">Free
                                                        Quantity</label>
                                                    <input class="form-control" type="number" placeholder="Enter Free quantity"
                                                        name="free_qty[]">
                                                </div>
                                            </div>
                                            <div class="col-md-1 daybk-rt-btns mb-2">
                                                <button type="button" class="btn btn-danger btn-sm" id="removeFocRow"><i
                                                        class="las la-minus"></i></button>
                                            </div>
                                     </div>`;

            $("#focContainer").append(html);
            $('.foc-unit').select2({
                placeholder: 'Choose unit',
            });
        });

        $(document).on('click', '#addFocOtherRow', function(e) {
            e.preventDefault();
            let rowCount = $('.focOtherRow').length;
            if (rowCount == "" || rowCount == undefined) {
                rowCount = 1;
            } else {
                rowCount = parseInt(rowCount) + parseInt(1);
            }
            var html = `<div class="row focOtherRow" id="foc_other_row_${rowCount}">
                                            <div class="col-md-2 col-sm-6 mb-2">
                                                <div>
                                                    <label class="form-label" for="product-title-input">Unit</label>
                                                    <select class="form-select foc-unit" id="" name="unit[]">
                                                        <option value=""></option>
                                                        @foreach ($units as $unit)
                                                            <option value="{{ $unit->id }}">
                                                                {{ $unit->symbol }}</option>
                                                        @endforeach
                                                    </select>
                                                </div>
                                            </div>
                                            <div class="col-md-2 col-sm-6 mb-2">
                                                <div>
                                                    <label class="form-label" for="product-title-input">Quantity</label>
                                                    <input class="form-control" type="number" placeholder="Enter quantity"
                                                        name="quantity[]">
                                                </div>
                                            </div>
                                            <div class="col-md-3 col-sm-6 mb-2">
                                                <div>
                                                <label class="form-label" for="product-title-input">Item</label>
                                            <select class="form-control stock-item" name="other_item[]" onchange="fetchItemData(${rowCount})" id="item_${rowCount}"><option value="">Select item</option>';
                                           </select>
                                           </div>
                                            </div>
                                            <div class="col-md-2 col-sm-6 mb-2">
                                                <div>
                                                <label class="form-label" for="product-title-input">Unit</label>
                                                 <select name="other_unit_id[]" class="mousetrap form-control unit_change unit_${rowCount}" id="unit_change_${rowCount}"></select>
                                            </div>
                                            </div>
                                            <div class="col-md-2 col-sm-6 mb-2">
                                                <div>
                                                    <label class="form-label" for="product-title-input">Free
                                                        Quantity</label>
                                                    <input class="form-control" type="number" placeholder="Enter Free quantity"
                                                        name="free_qty[]">
                                                </div>
                                            </div>
                                            <div class="col-md-1 daybk-rt-btns mb-2">
                                                <button type="button" class="btn btn-danger btn-sm" id="removeFocRow"><i
                                                        class="las la-minus"></i></button>
                                            </div>
                                     </div>`;

            $("#focOtherContainer").append(html);
            $('.foc-unit').select2({
                placeholder: 'Choose unit',
            });

            $('#item_' + rowCount + '').select2({
                placeholder: 'Select item',
                ajax: {
                    url: "/admin/get-stock-items",
                    type: "POST",
                    dataType: 'json',
                    delay: 250,
                    data: function(params) {
                        return {
                            _token: "{{ csrf_token() }}",
                            search: params.term,
                            page: params.page,
                        };
                    },
                    processResults: function(data, params) {
                        params.page = params.page || 1;
                        var results = data.data.map(function(item) {
                            var name = item.description != null ? item.name + ' (' + item
                                .description +
                                ')' : item.name;
                            return {
                                id: item.id,
                                text: name,
                            };
                        });

                        return {
                            results: results,
                            pagination: {
                                more: (params.page * data.per_page) < data.total
                            }
                        };
                    },
                    cache: true
                }
            });
            $('.unit_change').select2();
        });

        function fetchItemData(id) {
            var prd = $("#item_" + id).val();
            if (prd != "" && id != "") {
                $.ajax({
                    url: "{{ route('fetch-stock-item') }}",
                    type: "POST",
                    data: {
                        _token: "{{ csrf_token() }}",
                        "prd": prd,
                    },
                    success: function(data) {
                        $("#unit_change_" + id).html(data.options);
                    },
                    error: function(xhr) {
                        alert("Something went wrong. Please try again");
                    }
                });
            } else {
                alert("Something went wrong. Please try again");
            }
        };

        $('#stock-foc-form').submit(function(e) {
            e.preventDefault();
            var formData = new FormData(this);
            $.ajax({
                type: 'POST',
                url: $(this).attr('action'),
                data: formData,
                cache: false,
                contentType: false,
                processData: false,
                success: function(response) {
                    if (response.status == 'success') {
                        Swal.fire({
                            icon: 'success',
                            title: 'Success',
                            text: response.message,
                            confirmButtonText: 'Ok'
                        }).then((result) => {
                            if (result.isConfirmed) {
                                window.location.href =
                                    "{{ route('stock-items.index') }}";
                            }

                        })
                    } else {
                        Swal.fire({
                            icon: 'error',
                            title: 'Error',
                            text: response.message,
                            confirmButtonText: 'Ok'
                        })
                    }
                },
            });
        })

        $('#stock-other-item-foc-form').submit(function(e) {
            e.preventDefault();
            var formData = new FormData(this);
            $.ajax({
                type: 'POST',
                url: $(this).attr('action'),
                data: formData,
                cache: false,
                contentType: false,
                processData: false,
                success: function(response) {
                    if (response.status == 'success') {
                        Swal.fire({
                            icon: 'success',
                            title: 'Success',
                            text: response.message,
                            confirmButtonText: 'Ok'
                        }).then((result) => {
                            if (result.isConfirmed) {
                                window.location.href =
                                    "{{ route('stock-items.index') }}";
                            }

                        })
                    } else {
                        Swal.fire({
                            icon: 'error',
                            title: 'Error',
                            text: response.message,
                            confirmButtonText: 'Ok'
                        })
                    }
                },
            });
        })
    </script>
@endsection