@extends('layouts.master')
@section('header')
    <link href="{{ asset('css/gijgo.min.css') }}" rel="stylesheet" type="text/css" />
    <link href="{{ asset('css/select2.min.css') }}" rel="stylesheet" />
    <link rel="stylesheet" href="{{ asset('css/select2-bootstrap4.min.css') }}">
@endsection
<style>
    div.sticky {
        position: sticky;
        top: 0;
        background-color: #ffffff;
        padding-top: 8px;
        z-index: 100;
    }

    form.noStyle {
        margin: 0;
    }

    .btn-circle.btn-sm {
        width: 30px;
        height: 30px;
        padding: 6px 0px;
        border-radius: 15px;
        font-size: 8px;
        text-align: center;
    }

    .form-control {
        display: inline-block !important;
    }
</style>
@section('content')
<input type="hidden" id="url" value="{{ url('') }}">
    <form action="{{ route('itemSize.update') }}" method="POST" id="Form_Submit" class="noStyle"
        onsubmit="return validateForm()">
        @csrf
        @method('PUT')
        <div class="card">
            <div class="card-body">
                <div class="sticky">
                    <div class="row ">
                        <div class="col-3">
                            <h5>ฟอร์มกำหนด Size Master Item </h5>
                        </div>

                        <div class="col-1 text-left">
                            <button type="button" id="btnPreview" class="btn btn-primary"
                                onclick="renderPdfBOMNew('{{$hd->xvpdtcode}}')"> <i class="fas fa-eye"></i> Preview</button>
                        </div>
                        <div class="col text-right">
                            <a href="{{ route('item.index') }}" class="btn btn-success"><i
                                    class="fas fa-long-arrow-alt-left fa-lg"></i> <span>กลับ</span></a>
                        </div>
                    </div>
                    <hr>
                </div>
                <h5>ข้อมูลเอกสาร</h5>
                <div class="row border">

                    <div class="col border-right ">

                        @component('MasterItem.components.hd', ['oldHD' => $hd])
                        @endcomponent
                    </div>
                    <div class="col border-right ">

                        @component('MasterItem.components.secondHD', ['oldHD' => $hd])
                        @endcomponent
                    </div>

                </div>
                <div class="row">
                    <div class="col border-right  ">
                        @component('MasterItemSize.components.Size', ['oldDT' => $size])
                        @endcomponent
                    </div>
                    <div class="col  ">
                        @component('Components.upload', ['oldPicture' => $hd->XVPdtImg])
                        @endcomponent
                    </div>
                </div>
            </div>
        </div>
        </div>
        <input type="hidden" name="msg" value="{{ session()->get('msg') }}">
    </form>
@endsection
<script src="{{ asset('js/helper.js') }}"></script>
<script src="{{ asset('js/jquery-3.5.1.min.js') }}"></script>
<script src="{{ asset('js/gijgo.min.js') }}" defer type="text/javascript"></script>
<script src="{{ asset('js/select2.min.js') }}" defer></script>
<script src="{{ asset('js/sweetalert.min.js') }}"></script>
<script src="{{asset('js/ThbNumber.js')}}"></script>
<script src="{{ asset('js/pdfmake.js') }}"></script>
<script src="{{ asset('js/pages/MasterItemSize/pdf.js') }}"></script>
<script>
    async function TakeAction(action, value = '') {
        let eventMethod = document.getElementById('eventMethod');
        let eventValue = document.getElementById('eventValue');
        eventMethod.value = action
        eventValue.value = value
        if (action === 'delete') {
            let resp = swal({
                title: "ยืนยันการลบข้อมูล Size " + value,
                text: `ข้อมูลที่เลือกและ Bom Size ที่ได้กำหนดไว้จะถูกลบ`,
                icon: "warning",
                buttons: true,
                dangerMode: true,
            })
            let isOk = await resp
            if (isOk) validateForm(true);
        } else {
            validateForm();
        }
    }

    function validateForm(isSkip = false) {
        if (isSkip) {
            document.getElementById("Form_Submit").submit();
            return true;
        } else {
            let Size = document.getElementById("XVPszName").value;
            if (Size) {
                document.getElementById("Form_Submit").submit();
                return true
            } else {
                swal('กรุณากรอก Size', "กรุณากรอก Size ก่อนบันทึกข้อมูล", "warning")
            }
            return false;
        }
    }

    $(document).ready(function() {
        if ($('input[name="msg"]').val() == 'Duplicate') {
            console.log('here')
            swal('พบ Size นี้แล้ว', "กรุณาตั้ง Size ใหม่", "warning")
        }
        $("#Form_Submit :input").prop("disabled", true);
        // $("#btn_save").attr('disabled',false)
        $("#XVPszName").attr('disabled', false)
        $("#btn_XVPszName").attr('disabled', false)
        $("#eventMethod").attr('disabled', false)
        $("#eventValue").attr('disabled', false)
        $("[name='_token']").attr('disabled', false)
        $("[name='_method']").attr('disabled', false)
        $("[name='xvpdtcode']").attr('disabled', false)
        $("#btnPreview").attr('disabled', false)
    })
</script>