@extends('layouts.app')
@section('title', __('customer.list'))

@section('css')

@endsection
@section('content')
    <!--start page wrapper -->
    <div class="page-wrapper">
        <div class="page-content">
            <x-breadcrumb :langArray="['customer.customers', 'customer.list']" />

            <div class="card">

                <div class="card-header px-4 py-3 d-flex justify-content-between">
                    <!-- Other content on the left side -->
                    <div>
                        <h5 class="mb-0 text-uppercase"> Certificate Issue</h5>
                    </div>

                    @can('customer.create')
                        <!-- Button pushed to the right side -->
                        <x-anchor-tag href="{{ route('certificate.shortterm.list') }}" text="जारी प्रमाणपत्रहरु"
                            class="btn btn-primary px-5" />
                    @endcan

                </div>
                <div class="card-body">
                    <form id="add_student"
                        action="{{ route('certificate.shortterm.store') }}"
                        method="post" class="form needs-validation" novalidate>
                        <div class="row">
                            <div class="col-md-6 mb-3">
                                <div class="form-group">
                                    <label for="name" class="form-label">Full Name <span
                                            class="mandatory">*</span></label>
                                    <input type="text" name="name" id="name" class="form-control" required />
                                </div>
                            </div>
                            <div class="col-md-6 mb-3">
                                <div class="form-group">
                                    <label for="guardian_name" class="form-label">Guardian Name <span
                                            class="mandatory">*</span></label>
                                    <input type="text" name="guardian_name" id="guardian_name" class="form-control"
                                        required />
                                </div>
                            </div>
                            <div class="col-md-6 mb-3">
                                <div class="form-group">
                                    <label for="citizenship_number" class="form-label">Citizenship number <span
                                            class="mandatory">*</span></label>
                                    <input type="text" name="citizenship_number" id="citizenship_number" class="form-control"
                                        required />
                                </div>
                            </div>
                            <div class="col-md-6 mb-3">
                                <div class="form-group">
                                    <label for="mobileno" class="form-label">Mobile No <span
                                            class="mandatory">*</span></label>
                                    <input type="text" name="mobileno" id="mobileno" class="form-control"
                                        required />
                                </div>
                            </div>

                            <div class="col-md-3 mb-3">
                                <div class="form-group">
                                    <label for="state_id" class="form-label">Province</label>

                                    <x-dropdown-province additionalClasses="select-state state" selected=""
                                        onchange="populateDistrict(true, true)" />
                                </div>
                            </div>
                            <div class="col-md-3 mb-3">
                                <div class="form-group">
                                    <label for="district_id" class="form-label">District</label>
                                    <x-dropdown-district selected="" onchange="populateMunicipality(true, true)"
                                        additionalClasses="select-district district" />
                                </div>
                            </div>
                            <div class="col-md-4 mb-3">
                                <div class="form-group">
                                    <label for="perm_municipality_id" class="form-label">Municipality/Rural</label>
                                    <x-dropdown-palika selected="" additionalClasses="municipality" />

                                </div>
                            </div>
                            <div class="col-md-2 mb-3">
                                <div class="form-group">
                                    <label for="ward_no" class="form-label">Ward No</label>
                                    <input type="text" id="ward_no" name="ward_no" class="form-control" required />
                                </div>
                            </div>
                            <div class="col-md-3 mb-3">
                                <div class="form-group">
                                    <label for="tsdbs" class="form-label">Training Start Date (B.S)</label>
                                    <input type="text" class="form-control" name="tsdbs" autocomplete="off"
                                        id="tsdbs" value="" data-operation-date-setting="np"
                                        onload="initNepaliDatePickers(this,convertDateFortsdbs)" required />
                                </div>
                            </div>
                            <div class="col-md-3 mb-3">
                                <div class="form-group">
                                    <label for="tsdAD" class="form-label">Training Start Date (A.D)</label>
                                    <input type="text" class="form-control datepicker" name="tsdAD"
                                        autocomplete="off" id="tsdAD" value="" required />
                                </div>
                            </div>
                            <div class="col-md-3 mb-3">
                                <div class="form-group">
                                    <label for="tedbs" class="form-label">Training End Date (B.S)</label>
                                    <input type="text" class="form-control" name="tedbs" autocomplete="off"
                                        id="tedbs" value="" data-operation-date-setting="np"
                                        onload="initNepaliDatePickers(this,convertDateFortedbs)" required />
                                </div>
                            </div>
                            <div class="col-md-3 mb-3">
                                <div class="form-group">
                                    <label for="tedAD" class="form-label">Training end Date (A.D)</label>
                                    <input type="text" class="form-control datepicker" name="tedAD"
                                        autocomplete="off" id="tedAD" value="" required />
                                </div>
                            </div>
                            <div class="col-md-4 mb-3">
                                <x-label for="sector" name="सेक्टर" />
                                <div class="input-group">
                                    <x-dropdown-sector selected="" />
                                    <button type="button" class="btn btn-outline-primary"
                                        data-bs-toggle="modal" data-bs-target="#sectorModal"><i
                                            class="bx bx-plus-circle me-0"></i>
                                    </button>
                                </div>
                            </div>
                            <div class="col-md-4 mb-3">
                                <x-label for="program_id" name="सब-सेक्टर" />
                                <div class="input-group">
                                    <x-dropdown-sub-sector selected="" />
                                    <button type="button" class="btn btn-outline-primary"
                                        data-bs-toggle="modal" data-bs-target="#subsectorModal"><i
                                            class="bx bx-plus-circle me-0"></i>
                                    </button>
                                </div>
                            </div>
                            <div class="col-md-4 mb-3">
                                <x-label for="occupation" name="पेशा" />
                                <div class="input-group">
                                    <x-dropdown-occupation selected="" :isMultiple=false onchange="fetchItemList"/>
                                    <button type="button" class="btn btn-outline-primary"
                                        data-bs-toggle="modal" data-bs-target="#occupationModal"><i
                                            class="bx bx-plus-circle me-0"></i>
                                    </button>
                                </div>
                            </div>
                            
                            <div class="col-md-3 mb-3">
                                <div class="form-group">
                                    <label for="nepaliDate" class="form-label">Date of Birth (B.S)</label>
                                    <input type="text" class="form-control " name="dobBS" autocomplete="off"
                                        id="nepaliDate" value="" data-operation-date-setting="np"
                                        onload="initNepaliDatePickers(this,convertDateForNepaliDate)" required />
                                </div>
                            </div>
                            <div class="col-md-3 mb-3">
                                <div class="form-group">
                                    <label for="englishDate" class="form-label">Date of Birth (A.D)</label>
                                    <input type="text" class="form-control datepicker" name="dob"
                                        autocomplete="off" id="englishDate" value="" required />
                                </div>
                            </div>

                            <div class="col-md-3 mb-3">
                                <div class="form-group">
                                    <label for="doiBS" class="form-label">Issued Date (B.S)</label>
                                    <input type="text" class="form-control" name="doiBS" autocomplete="off"
                                        id="doiBS" value="" data-operation-date-setting="np"
                                        onload="initNepaliDatePickers(this,convertDateForDoiBS)" required />
                                </div>
                            </div>
                            <div class="col-md-3 mb-3">
                                <div class="form-group">
                                    <label for="doi" class="form-label">Issued Date (A.D)</label>
                                    <input type="text" class="form-control datepicker" name="doi"
                                        autocomplete="off" id="doi" value="" required />
                                </div>
                            </div>
                            <div class="col-md-6 mb-3">
                                <div class="form-group">
                                    <label for="issuedby" class="form-label">Issued By <span
                                            class="mandatory">*</span></label>
                                    <select name="issuedby" id="issuedby" class="form-select" required>
                                    <option value="1">1</option>
                                    </select>
                                </div>
                            </div>
                        </div>
                        <div class="row justify-content-center mb-3">
                            <div class="col-md-4 text-center">
                                <x-label for="picture" name="{{ __('app.image') }}" />
                                <x-browse-image src="{{ url('/noimage/') }}" name='applicant_photo'
                                    imageid='uploaded-image-1' inputBoxClass='input-box-class-1'
                                    imageResetClass='image-reset-class-1' />
                            </div>
                        </div>
                    </form>
                </div>
                <div class="card-footer justify-content-end">
                    <div class="row">
                        <div class="col-md-6 text-left">
                            <button type="button"
                                class="btn btn-primary w-230px btn-md rounded-2 fs-14 fw-700 shadow-primary save-new"
                                onclick="addStudentData(this, 'new')">
                                <i class="bx bx-log-out"></i> Issued & New
                            </button>
                            <button type="button"
                                class="btn btn-primary w-230px btn-md rounded-2 fs-14 fw-700 shadow-primary save-next"
                                onclick="addStudentData(this, 'next')">
                                <i class="bx bx-save"></i> Save & Next
                            </button>

                        </div>

                    </div>
                </div>


            </div>
        </div>
    </div>
    @include('modals.sector.create')
    @include('modals.sub-sector.create')
    @include('modals.occupation.occupation')

@endsection
@section('js')

    <script src="{{ asset('custom/js/common/common.js') }}"></script>
    <script src="{{ asset('custom/js/custom-valid.js') }}"></script>
    <script src="{{ asset('custom/js/validate.js') }}"></script>
    <script src="{{ asset('custom/js/modals/sector/sector.js') }}"></script>
    <script src="{{ asset('custom/js/modals/sub-sector/sub-sector.js') }}"></script>
    <script src="{{ asset('custom/js/modals/occupation/occupation.js') }}"></script>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.mask/1.14.16/jquery.mask.min.js"></script>
    <script src="{{ asset('custom/js/certificate/shcreate.js') }}"></script>
@endsection