@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>
<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;
    }

    .tab {
        overflow: hidden;
        border: 1px solid #ccc;
        background-color: #f1f1f1;
    }

    /* Style the buttons inside the tab */
    .tab button {
        background-color: inherit;
        float: left;
        border: none;
        outline: none;
        cursor: pointer;
        padding: 14px 16px;
        transition: 0.3s;
        font-size: 17px;
    }

    /* Change background color of buttons on hover */
    .tab button:hover {
        background-color: #ddd;
    }

    /* Create an active/current tablink class */
    .tab button.active {
        background-color: #ccc;
    }

    /* Style the tab content */
    .tabcontent {
        display: none;
        padding: 6px 12px;
        border: 1px solid #ccc;
        border-top: none;
    }
</style>
@section('content')

    <form action="{{ route('itemBomSize.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>ฟอร์มกำหนด BomSize </h5>
                        </div>
                        <div class="col text-right">
                            <a href="{{ route('itemSize.index', ['xvpdtcode' => $hd->xvpdtcode]) }}"
                                class="btn btn-danger"><i class="fas fa-long-arrow-alt-left fa-lg"></i> <span>กลับ</span></a>
                            <button type="submit" id="btn_save" class="btn btn-success">บันทึก</button>
                        </div>
                    </div>
                    <hr>
                </div>
                <h5>ข้อมูลเอกสาร</h5>
                <div class="row border">
                    <input type="hidden" id="XVPszName" value="{{ $XVPszName }}" name="XVPszName">

                    <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-6 border-right  ">
                        @component('MasterItem.components.dt', ['oldDT' => $dt, 'disableDeleteFarbic' => true, 'XVPszName' => $XVPszName])
                        @endcomponent
                    </div>
                    <div class="col  ">
                        <div class="border-bottom">
                            <div class="form-group row mt-2">
                                <label class="col-sm-3 col-form-label">ชื่อโรงฟอก</label>
                                <div class="col-sm-9">
                                    <input type="text" class="form-control" id="XVPdtBleachingPlant"
                                        name="XVPdtBleachingPlant" value="{{ $hd->XVPdtBleachingPlant ?? '' }}">
                                </div>
                            </div>
                            <div class="form-group row mt-2">

                                <label class="col-sm-3 col-form-label">ชื่อโรงพิมพ์</label>
                                <div class="col-sm-9">
                                    <input type="text" class="form-control" id="XVPdtPrinterName" name="XVPdtPrinterName"
                                        value="{{ $hd->XVPdtPrinterName ?? '' }}">
                                </div>
                            </div>
                            <div class="form-group row mt-2">

                                <label class="col-sm-3 col-form-label">ชื่อโรงปัก</label>
                                <div class="col-sm-9">
                                    <input type="text" class="form-control" id="XVPdtEmbroideryHouseName"
                                        name="XVPdtEmbroideryHouseName" value="{{ $hd->XVPdtEmbroideryHouseName ?? '' }}">
                                </div>
                            </div>
                        </div>
                        @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/pages/MasterItem/form.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() {
        $("#SelectDesign").prop("disabled", true);
        $("#xvpdtname").prop("disabled", true);
        $("#XVPdtPatternNo").prop("disabled", true);
        $("#XVPdtColor").prop("disabled", true);
        $("#XVDsRoundNo").prop("disabled", true);
        $("#XFPdtCost").prop("disabled", true);
        $("#XVDsDateP").prop("disabled", true);
        $("#XFPdtPrice").prop("disabled", true);
        $("#XVPdtClothFace").prop("disabled", true);
        $("#XVPdtCrotchFabric").prop("disabled", true);
        $("#XVPdtFarbicA").prop("disabled", true);
        $("#XVPdtFarbicB").prop("disabled", true);
        $("#SelectSeason").prop("disabled", true);
        $("#SelectForUse").prop("disabled", true);
        $("#SelectGenerate").prop("disabled", true);
        $("#SelectShape").prop("disabled", true);
        $("#SelectPureMaterial").prop("disabled", true);
        $("#XVPdtDateP").prop("disabled", true);
        $("#XVPdtRoundNo").prop("disabled", true);
         $("#SelectPureMaterial2").prop("disabled", true);
        $("#XVPdtBleachingPlant").prop("disabled", true);
        $("#XVPdtPrinterName").prop("disabled", true);
        $("#XVPdtEmbroideryHouseName").prop("disabled", true);
        //Initial Selected 2
        var oldList = document.getElementsByClassName("dtItems")
        let oldArr = [];
        for (let i = 0; i < oldList.length; i++) {
            oldArr.push(oldList[i].id)
        }
        TriggerChange(oldArr)

        const FarbicItem = document.getElementById('SelectPureMaterial').value;
        TriggerFarbic(FarbicItem);
        //
        if ($('input[name="msg"]').val() == 'Duplicate') {
            swal('พบ Size นี้แล้ว', "กรุณาตั้ง Size ใหม่", "warning")
        }
        //Diable All
        $("#Form_Submit :input").prop("disabled", true);
        //End Disable All
        //Can't Change
        $("[name='_token']").attr('disabled', false)
        $("[name='_method']").attr('disabled', false)
        //End Can't Change
        //Current Form
        $("#SelectMaterial").attr('disabled', false)
        $("#btn_save").attr('disabled', false)
        $(".renderer").attr('disabled', false)
        $("[name='xvuntcode[]']").attr('disabled', false)
        $("[name='XFBomQty[]']").attr('disabled', false)
        $("[name='xvmatcode[]']").attr('disabled', false)
        $("[name='XVPodName[]']").attr('disabled', false)
        $("#XVPszName").attr('disabled', false)
        $("[name='xvpdtcode']").attr('disabled', false)


        //End Current Form
    })
</script>