@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')
    Scheme Details
@endsection
@section('content')
    <main>
            <form action="/admin/scheme-item-store/{{ $stockItem->id }}" method="POST" id="stock-scheme-form" autocomplete="off"
                class="needs-validation" novalidate>
                @csrf
                <div class="row">

                    {{-- Schema section start  --}}
                    <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">
                                    Scheme Details
                                </h5>
                            </div>
                            <div class="card-body">
                                <div id="schemaContainer">
                                    @isset($stockItem)
                                        @if ($stockItem->stockItemSchemes->count() > 0)
                                            @foreach ($stockItem->stockItemSchemes as $key => $stockItemScheme)
                                                <div class="row schemaRow" id="schema_row_{{ $key + 1 }}">
                                                    <div class="col-md-3 col-sm-6 mb-2">
                                                        <input type="hidden" name="stock_item_scheme_id[]" value="{{ $stockItemScheme->id }}">
                                                        <div >
                                                            <label class="form-label" for="product-title-input">Schema
                                                                Name</label>
                                                            <select class="form-select price-slab scheme" id=""
                                                                name="scheme[]">
                                                                <option value=""></option>
                                                                @foreach ($schemes as $scheme)
                                                                    <option value="{{ $scheme->id }}"
                                                                        {{ $stockItemScheme->scheme_id == $scheme->id ? 'selected' : '' }}>
                                                                        {{ $scheme->name }}</option>
                                                                @endforeach
                                                            </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 class="form-select scheme-unit" id=""
                                                                name="scheme_unit[]">
                                                                <option value=""></option>
                                                                @foreach ($units as $unit)
                                                                    <option value="{{ $unit->id }}"
                                                                        {{ isset($stockItemScheme) ? ($stockItemScheme->unit_id == $unit->id ? 'selected' : '') : '' }}>
                                                                        {{ $unit->symbol }}</option>
                                                                @endforeach
                                                            </select>
                                                        </div>
                                                    </div>
                                                    <div class="col-md-3 col-sm-6 mb-2">
                                                        <div >
                                                            <label class="form-label" for="product-title-input">Selling
                                                                Price (Excl Tax)</label>
                                                            <input class="form-control price_slab_selling_price"
                                                                type="number"
                                                                value="{{ $stockItemScheme->selling_price }}"
                                                                placeholder="Enter selling price"
                                                                name="scheme_price[]" data-id="{{ $key + 1 }}">
                                                        </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 price_slab_selling_price"
                                                                type="number" placeholder="Enter quantity"
                                                                name="scheme_quantity[]" value={{ $stockItemScheme->quantity }}>
                                                        </div>
                                                    </div>
                                                    <div
                                                        class="col-md-1 daybk-rt-btns mb-2">
                                                        <button type="button" class="btn btn-danger btn-sm"
                                                            id="removeSchemeRow"><i class="las la-minus"></i></button>
                                                    </div>
                                                </div>
                                            @endforeach
                                        @else
                                            <div class="row schemaRow" id="schema_row_1">
                                                <div class="col-md-3 col-sm-6 mb-2">
                                                    <div >
                                                        <label class="form-label" for="product-title-input">Scheme</label>
                                                        <select class="form-select scheme" id="" name="scheme[]">
                                                            <option value=""></option>
                                                            @foreach ($schemes as $scheme)
                                                                <option value="{{ $scheme->id }}">{{ $scheme->name }}
                                                                </option>
                                                            @endforeach
                                                        </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 class="form-select scheme-unit" id=""
                                                            name="scheme_unit[]">
                                                            <option value=""></option>
                                                            @foreach ($units as $unit)
                                                                <option value="{{ $unit->id }}">{{ $unit->symbol }}
                                                                </option>
                                                            @endforeach
                                                        </select>
                                                    </div>
                                                </div>
                                                <div class="col-md-3 col-sm-6 mb-2">
                                                    <div >
                                                        <label class="form-label" for="product-title-input">Selling
                                                            Price(Excl Tax)</label>
                                                        <input class="form-control price_slab_selling_price" type="number"
                                                            placeholder="Enter selling price (Excl Tax)" name="scheme_price[]"
                                                            data-id="1">
                                                    </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 price_slab_selling_price" type="number"
                                                            placeholder="Enter quantity" name="scheme_quantity[]"
                                                            data-id="1">
                                                    </div>
                                                </div>
                                                <div class="col-md-1 mb-2 daybk-rt-btns">
                                                    <button type="button" class="btn btn-danger btn-sm"
                                                        id="removeSchemeRow"><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="addSchemaRow"><i
                                            class="las la-plus"></i>Add</button>
                                        <button type="submit" class="btn btn-success">
                                            Submit
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    {{-- {{ Schema section ends }} --}}
                </div>
            </form>
    </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 () {

            $('.scheme').select2({
                placeholder: 'Choose Scheme',
            });
            $('.scheme-unit').select2({
                placeholder: 'Choose unit',
            });
        });

        $(document).on('click', '#removeSchemeRow', function(e) {
            e.preventDefault();
            $(this).closest('.schemaRow').remove();
        });
        $('#addSchemaRow').on('click', function(e) {
            e.preventDefault();
            let rowCount = $('.schemaRow').length;
            if (rowCount == "" || rowCount == undefined) {
                rowCount = 1;
            } else {
                rowCount = parseInt(rowCount) + parseInt(1);
            }
            var html = `<div class="row schemaRow" id="schema_row_1">
                            <div class="col-md-3 col-sm-6 mb-2">
                                <div>
                                    <label class="form-label" for="product-title-input">Scheme</label>
                                    <select class="form-select scheme" id=""
                                        name="scheme[]">
                                        <option value=""></option>
                                        @foreach ($schemes as $scheme)
                                            <option value="{{ $scheme->id }}">{{ $scheme->name }}
                                            </option>
                                        @endforeach
                                    </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 class="form-select scheme-unit" id=""
                                        name="scheme_unit[]">
                                        <option value=""></option>
                                        @foreach ($units as $unit)
                                            <option value="{{ $unit->id }}">{{ $unit->symbol }}
                                            </option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                            <div class="col-md-3 col-sm-6 mb-2">
                                <div>
                                    <label class="form-label" for="product-title-input">Selling
                                        Price(Excl Tax)</label>
                                    <input class="form-control"  type="number"
                                        placeholder="Enter selling price (Excl Tax)"
                                        name="scheme_price[]" data-id="1">
                                </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="scheme_quantity[]" data-id="1">
                                </div>
                            </div>
                            <div class="col-md-1 daybk-rt-btns mb-2">
                                <button type="button" class="btn btn-danger btn-sm" id="removeSchemeRow"><i
                                        class="las la-minus"></i></button>
                            </div>
                    </div>`;

            $("#schemaContainer").append(html);
            $('.scheme').select2({
                placeholder: 'Choose Scheme',
            });
            $('.scheme-unit').select2({
                placeholder: 'Choose unit',
            });
        });

        $('#stock-scheme-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