@extends('layouts.app')
@section('title', \App\CPU\translate('Upload New Contract'))
@push('css_or_js')
    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
    <script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
    <link rel="stylesheet" href="{{ asset('assets') }}/css/bootstrap-datepicker.min.css" />
    <meta name="csrf-token" content="{{ csrf_token() }}">
    <style>
        .form-group {
            margin-bottom: 25px;
            padding-right: 25px;
        }
    </style>
@endpush

@section('content')
    <div class="app-main flex-column flex-row-fluid" id="kt_app_main">

        <div id="kt_app_toolbar" class="app-toolbar py-3 py-lg-6">
            <!--begin::Toolbar container-->
            <div id="kt_app_toolbar_container" class="app-container container-xl d-flex flex-stack">
                <!--begin::Page title-->
                <div class="page-title d-flex flex-column justify-content-center flex-wrap me-3">
                    <!--begin::Title-->
                    <h1 class="page-heading d-flex text-dark fw-bold fs-3 flex-column justify-content-center my-0">Contracts
                    </h1>
                    <!--end::Title-->
                    <!--begin::Breadcrumb-->
                    <ul class="breadcrumb breadcrumb-separatorless fw-semibold fs-7 my-0 pt-1">
                        <!--begin::Item-->
                        <li class="breadcrumb-item text-muted">
                            <a href="" class="text-muted text-hover-primary">Dashboard</a>
                        </li>
                        <!--end::Item-->
                        <!--begin::Item-->
                        <li class="breadcrumb-item">
                            <span class="bullet bg-gray-400 w-5px h-2px"></span>
                        </li>
                        <!--end::Item-->
                        <!--begin::Item-->
                        <li class="breadcrumb-item text-muted">Contracts</li>
                        <!--begin::Item-->
                        <li class="breadcrumb-item">
                            <span class="bullet bg-gray-400 w-5px h-2px"></span>
                        </li>
                        <li class="breadcrumb-item text-muted">{{ \App\CPU\translate('Upload New Contract') }}</li>
                        <!--end::Item-->
                    </ul>
                    <!--end::Breadcrumb-->
                </div>
                <!--end::Page title-->

            </div>
            <!--end::Toolbar container-->
        </div>


        <!-- Content Row -->
        <div class="app-container container-xl d-flex flex-stack">
            <div class="col-md-12">
                <div class="card">
                    <div class="card-body" style="min-height: 375px;">
                        <div class="d-flex align-items-center position-relative mb-7">
                            <!--begin::Label-->
                            <div class="position-absolute top-0 start-0 rounded h-100 bg-secondary w-4px"></div>
                            <!--end::Label-->
                            <!--begin::Details-->
                            <div class="fw-semibold ms-5">
                                <a href="#" class="fs-5 fw-bold text-dark text-hover-primary">Upload contract</a>
                                <!--begin::Info-->
                                <div class="fs-7 text-muted"><a href="{{ asset('assets') }}/upload-template.xlsx">Download Template</a></div>
                                <!--end::Info-->
                            </div>
                            <!--end::Details-->

                        </div>
                        <form class="add_new_form" action="{{ route('admin.contract.add-new') }}" method="post"
                            enctype="multipart/form-data">
                            @csrf
                            <div class="form-group">
                                <div class="row">
                                    <div class="col-md-6 form-group">
                                        <button type="button" class="btn btn-primary" id="btnfile">
                                            <!--begin::Svg Icon | path: icons/duotune/files/fil018.svg-->
                                            <span class="svg-icon svg-icon-2">
                                                <svg width="24" height="24" viewBox="0 0 24 24" fill="none"
                                                    xmlns="http://www.w3.org/2000/svg">
                                                    <path opacity="0.3" d="M10 4H21C21.6 4 22 4.4 22 5V7H10V4Z"
                                                        fill="currentColor"></path>
                                                    <path
                                                        d="M10.4 3.60001L12 6H21C21.6 6 22 6.4 22 7V19C22 19.6 21.6 20 21 20H3C2.4 20 2 19.6 2 19V4C2 3.4 2.4 3 3 3H9.20001C9.70001 3 10.2 3.20001 10.4 3.60001ZM16 11.6L12.7 8.29999C12.3 7.89999 11.7 7.89999 11.3 8.29999L8 11.6H11V17C11 17.6 11.4 18 12 18C12.6 18 13 17.6 13 17V11.6H16Z"
                                                        fill="currentColor"></path>
                                                    <path opacity="0.3"
                                                        d="M11 11.6V17C11 17.6 11.4 18 12 18C12.6 18 13 17.6 13 17V11.6H11Z"
                                                        fill="currentColor"></path>
                                                </svg>
                                            </span>
                                            <!--end::Svg Icon-->Upload Contract
                                        </button>
                                        <span id="fname"></span>


                                        <div class="wrapper" style="display:none;">
                                            <input type="file" id="uplodfile" required name="contractfile" />
                                        </div>
                                        <br>
                                        {{-- <div class="col-md-12 form-group" style="margin-top:20px;">
																<input type="checkbox" name="terms_conditions" onchange="document.getElementById('sendNewContract').disabled = !this.checked;"> <span>I have read and agree to <a href="#" data-bs-toggle="modal" data-bs-target="#kt_modal_terms">terms and conditions</a></span>
															</div> --}}
                                    </div>
                                    <div class="col-md-6 form-group d-flex justify-content-end" style="max-height:45px;">
                                        <div class="row row-cols-lg-2 g-10">
                                            <div class="col">
                                                <div
                                                    class="fv-row mb-9 fv-plugins-icon-container fv-plugins-bootstrap5-row-valid">
                                                    <!--begin::Label-->
                                                    <label class="fs-6 fw-semibold mb-2 required">Contract Start
                                                        Date</label>
                                                    <!--end::Label-->
                                                    <!--Date picker -->
                                                    <input
                                                        class="form-control form-control-solid startdate input dateSelect"
                                                        type="text" name="start_date" required readonly="readonly">
                                                </div>
                                            </div>
                                            <div class="col" data-kt-calendar="datepicker">
                                                <div class="fv-row mb-9">
                                                    <!--begin::Label-->
                                                    <label class="fs-6 fw-semibold mb-2 required">Contract End Date</label>
                                                    <!--end::Label-->
                                                    <!--Date picker -->
                                                    <input class="form-control form-control-solid enddate input dateSelect"
                                                        type="text" name="end_date" required readonly="readonly">
                                                </div>
                                            </div>

                                            <div class="col">
                                                <div
                                                    class="fv-row mb-9 fv-plugins-icon-container fv-plugins-bootstrap5-row-valid">
                                                    <!--begin::Label-->
                                                    <label class="fs-6 fw-semibold mb-2 required">Contract Name</label>
                                                    <!--end::Label-->
                                                    <!--begin::Input-->
                                                    <input class="form-control form-control-solid" name="contract_name"
                                                        required placeholder="Contract Name" id="contract_name"
                                                        type="text">
                                                    <!--end::Input-->
                                                    <div class="fv-plugins-message-container invalid-feedback"></div>
                                                </div>
                                            </div>
                                            <div class="col">
                                                <div
                                                    class="fv-row mb-9 fv-plugins-icon-container fv-plugins-bootstrap5-row-valid" style="display:none;">
                                                    <!--begin::Label-->
                                                    <label class="fs-6 fw-semibold mb-2 required">Contract Category</label>
                                                    <!--end::Label-->
                                                    <!--begin::Input-->
                                                    <input class="form-control form-control-solid" name="contract_category"
                                                         placeholder="Contract Category" id="contract_category"
                                                        type="text">
                                                    <!--end::Input-->
                                                    <div class="fv-plugins-message-container invalid-feedback"></div>
                                                </div>
                                            </div>

                                        </div>
                                    </div>
                                    <div class="col-md-12 form-group justify-content-end" style="max-height:45px;">
                                        <button type="submit" class="btn btn-primary px-4"
                                            id="sendNewContract">{{ \App\CPU\translate('Submit') }}</button>
                                    </div>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>


        <!--begin::Modal - Upload File-->
        <div class="modal fade" id="kt_modal_terms" tabindex="-1" aria-hidden="true">
            <!--begin::Modal dialog-->
            <div class="modal-dialog modal-dialog-centered mw-650px">
                <!--begin::Modal content-->
                <div class="modal-content">
                    <!--begin::Form-->
                    <form class="form" action="none" id="kt_modal_upload_form">
                        <!--begin::Modal header-->
                        <div class="modal-header">
                            <!--begin::Modal title-->
                            <h2 class="fw-bold">Terms and Conditions</h2>
                            <!--end::Modal title-->
                            <!--begin::Close-->
                            <div class="btn btn-icon btn-sm btn-active-icon-primary" data-bs-dismiss="modal">
                                <!--begin::Svg Icon | path: icons/duotune/arrows/arr061.svg-->
                                <span class="svg-icon svg-icon-1">
                                    <svg width="24" height="24" viewBox="0 0 24 24" fill="none"
                                        xmlns="http://www.w3.org/2000/svg">
                                        <rect opacity="0.5" x="6" y="17.3137" width="16"
                                            height="2" rx="1" transform="rotate(-45 6 17.3137)"
                                            fill="currentColor" />
                                        <rect x="7.41422" y="6" width="16" height="2"
                                            rx="1" transform="rotate(45 7.41422 6)" fill="currentColor" />
                                    </svg>
                                </span>
                                <!--end::Svg Icon-->
                            </div>
                            <!--end::Close-->
                        </div>
                        <!--end::Modal header-->
                        <!--begin::Modal body-->
                        <div class="modal-body pt-10 pb-15 px-lg-17">
                            <!--begin::Input group-->
                            <div class="form-group">

                            </div>
                            <!--end::Input group-->
                        </div>
                        <!--end::Modal body-->
                    </form>
                    <!--end::Form-->
                </div>
            </div>
        </div>
        <!--end::Modal - Upload File-->

    </div>
@endsection

@push('script')
    <script src="{{ asset('assets') }}/js/custom/apps/file-manager/list.js"></script>
    <script src="{{ asset('assets') }}/js/widgets.bundle.js"></script>
    <script src="{{ asset('assets') }}/js/custom/widgets.js"></script>
    <script src="{{ asset('assets') }}/js/custom/apps/chat/chat.js"></script>
    <script src="{{ asset('assets') }}/js/custom/utilities/modals/upgrade-plan.js"></script>
    <script src="{{ asset('assets') }}/js/custom/utilities/modals/create-app.js"></script>
    <script src="{{ asset('assets') }}/js/custom/utilities/modals/users-search.js"></script>
    <script src="{{ asset('assets') }}/js/bootstrap-datepicker.min.js"></script>
    <script>
        $("#btnfile").click(function() {
            $("#uplodfile").click();
        });

        $("#uplodfile").change(function() {
            var file = $(this).val().replace(/C:\\fakepath\\/ig, '');

            $("#fname").text(file);
        });

        //datepicker$('.datepicker').datepicker();
        rtl = false;
        if ($('.startdate').length > 0) {
            $('.startdate').datepicker({
                language: rtl ? 'ar' : 'en',
                //startDate:'tomorrow',
                clearBtn: true,
                autoclose: true,
            });
            //$('.startdate').datepicker('update', 'tomorrow');
        }
        if ($('.enddate').length > 0) {
            $('.enddate').datepicker({
                language: rtl ? 'ar' : 'en',
                //startDate:'tomorrow',
                clearBtn: true,
                autoclose: true,
            });
            // $('.enddate').datepicker('update', 'tomorrow');
        }

     
    </script>
@endpush