@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;
    }
    .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;
}
.swal-footer {
text-align: center;
}
/* Style the tab content */
.tabcontent {
  display: none;
  padding: 6px 12px;
  border: 1px solid #ccc;
  border-top: none;
}

</style>
@section('content')
    <form action="{{route('item.removeImg')}}" method="POST" style="margin: 0"
          onkeypress="return event.keyCode != 13;"
          id="removeImgForm" >
        @csrf
        <div class="col-1 text-left">
            <input type="hidden" class="form-control" name="F_Pk" id="F_Pk"  readonly>
        </div>
    </form>
    <form action="{{route('design.store')}}" method="POST" id="Form_Submit"
          enctype="multipart/form-data"
          class="noStyle"
          onsubmit="event.preventDefault(); return validateForm(this)">
        @csrf

        <div class="card" style="max-height: 89vh;overflow: auto;">
            <div class="card-body">
                <div class="sticky">
                    <div class="row ">
                        <div class="col-7">
                            <h5 style="display: inline-block" class="mr-2">คัดลอกข้อมูล Master Design</h5>

                            <select class="form-control col-2" id="XVDsType" name="XVDsType" required style="display: inline-block">
                            <option @if (isset($hd) && $hd->XVDsType == '1') selected @endif value="1">กางเกง</option>
                            <option @if (isset($hd) && $hd->XVDsType == '2') selected @endif value="2">เสื้อ/แจ็คเก็ต
                            </option>
                        </select>
                        </div>
                        <div class="col text-right">

                            <a href="{{route('design.index')}}" class="btn btn-danger"><i
                                    class="fas fa-long-arrow-alt-left fa-lg"></i> <span>กลับ</span></a>
                            <button type="submit" class="btn btn-primary">บันทึก</button>
                        </div>
                    </div>
                    <hr>
                </div>
                <h5>ข้อมูลเอกสาร</h5>
                <div class="row border">

                    <div class="col border-right ">

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

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

                </div>
                <div class="row" >
                    <div class="col border "  id ='detail'>

                        {{-- @component('Design.components.comment_detail',['oldHD'=>$hd])
                        @endcomponent --}}
                    </div>
                    <div class="col border  ">
                        <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="XVDsBleachingPlant" name="XVDsBleachingPlant"
                                    value="{{ $hd->XVDsBleachingPlant ?? '' }}">
                            </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="XVDsPrinterName" name="XVDsPrinterName"
                                    value="{{ $hd->XVDsPrinterName ?? '' }}">
                            </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="XVDsEmbroideryHouseName" name="XVDsEmbroideryHouseName"
                                    value="{{ $hd->XVDsEmbroideryHouseName ?? '' }}">
                            </div>
                        </div>
                        @component('Design.components.comment_description',['oldHD'=>$hd])
                        @endcomponent

                            @component('Components.upload',['oldPicture'=>$hd->XVDsImg,'hasDelete'=>true])
                            @endcomponent
                    </div>
                </div>
            </div>
        </div>
        </div>
    </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/MasterDesign/form.js')}}"></script>
<script src="{{asset('js/helper.js')}}"></script>

<script>
    async function deleteImages(){
        let resp = swal({
            title: `ยืนยันการลบรูป ?`,
            text: "หากยืนยันแล้วไม่สามารถเปลี่ยนแปลงได้",
            icon: "warning",
            buttons: true,
            dangerMode: true,
        })
        let isOk = await resp
        if (isOk){
            var PK_xvpdtcode = document.getElementById("PK_xvpdtcode").value;
            document.getElementById("F_Pk").value = PK_xvpdtcode;
            document.getElementById("removeImgForm").submit();
        }else{
            console.log('cancle')
        }
    }
    $(document).ready(function () {


              if( $('#XVDsType').val() == 2)
                {
                    $("#detail").html(`@component('Design.components.comment_detailshirt', ['oldHD' => $hd])@endcomponent`);
                }
                else
                {
                    $("#detail").html(`@component('Design.components.comment_detail', ['oldHD' => $hd])@endcomponent`);
                }

                $('#XVDsType').change(function() {
            if ($(this).val() == 1) {
                $("#detail").html(`@component('Design.components.comment_detail', ['oldHD' => $hd])@endcomponent`);
            } else {
                $("#detail").html(`@component('Design.components.comment_detailshirt', ['oldHD' => $hd])@endcomponent`);
            }
        })

        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);


    })


</script>