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

    .switch {
        position: relative;
        display: inline-block;
        width: 60px;
        height: 34px;
    }

    /* Hide default HTML checkbox */
    .switch input {
        opacity: 0;
        width: 0;
        height: 0;
    }

    /* The slider */
    .slider {
        position: absolute;
        cursor: pointer;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: rgb(192, 68, 68);
        -webkit-transition: .4s;
        transition: .4s;
    }

    .slider:before {
        position: absolute;
        content: "";
        height: 26px;
        width: 26px;
        left: 4px;
        bottom: 4px;
        background-color: white;
        -webkit-transition: .4s;
        transition: .4s;
    }

    input:checked+.slider {
        background-color: #47ba69;
    }

    input:focus+.slider {
        box-shadow: 0 0 1px #47ba69;
    }

    input:checked+.slider:before {
        -webkit-transform: translateX(26px);
        -ms-transform: translateX(26px);
        transform: translateX(26px);
    }

    /* Rounded sliders */
    .slider.round {
        border-radius: 34px;
    }

    .slider.round:before {
        border-radius: 50%;
    }
</style>
@if (session('status'))
    <div class="alert alert-success">
        {{ session('status') }}
    </div>
@endif
@section('content')
    <form action="{{ route('mat.store') }}" method="POST" id="Form_Submit" enctype="multipart/form-data" class="noStyle"
        onsubmit="return validateForm()">
        @csrf
        <div class="card " style="max-height: 89vh;overflow: auto;">
            <div class="card-body">
                <div class="sticky">
                    <div class="row ">
                        <div class="col-2 ">
                            <h5>ฟอร์มเพิ่มข้อมูลวัสดุ</h5>
                        </div>

                        <div class="col text-right">
                            <a href="{{ route('mat.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-success">บันทึก</button>
                        </div>
                    </div>
                    <hr>
                </div>
                <div class="row">
                    <div class="col">
                        <h5>ข้อมูลเอกสาร</h5>
                    </div>
                    <div class="col text-right" style="display:flex; justify-content: flex-end;align-items:center;">
                        <div class="mr-2">
                            <h6>ใช้งาน</h6>
                        </div>
                        <label class="switch">
                            <input type="checkbox" checked name="xbisactive" value="1">
                            <span class="slider round"></span>
                        </label>
                    </div>
                </div>

                <div class="row border">

                    <div class="col border-right ">

                        @component('Materials.components.hd')
                        @endcomponent
                    </div>

                    <div class="col  ">
                        @component('Components.SupplierForMat', ['isMultiple' => true])
                        @endcomponent

                    </div>

                </div>

                <div class="row">
                    <div class="col border-right  ">
                        @component('Materials.components.dt')
                        @endcomponent
                    </div>
                    <div class="col  ">
                        @component('Components.upload')
                        @endcomponent
                    </div>
                </div>
            </div>
        </div>
        </div>
    </form>
    <input type="hidden" name="msg" value="{{ session()->get('msg') }}">
@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/Material/form.js') }}"></script>