@extends('layouts.app')
@section('title', __('item.create'))

@section('content')
    <!--start page wrapper -->
    <div class="page-wrapper">
        <div class="page-content">
            <div class="row">
                <div class="col-12 col-lg-12">
                    <div class="card">
                        <div class="card-header px-4 py-3 d-flex justify-content-between align-items-center">
                            <h5 class="mb-0">{{ __('item.details') }}</h5>
                            <div class="btn-group">
                                <input type="radio" class="btn-check" name="item_type_radio" id="product" value="product"
                                    autocomplete="off" checked>
                                <label class="btn btn-outline-primary btn-sm"
                                    for="product">{{ __('item.product') }}</label>
                            </div>
                        </div>
                        <div class="card-body p-4">
                            <form class="row g-3 needs-validation" id="itemForm" action="{{ route('item.store') }}"
                                enctype="multipart/form-data" novalidate="novalidate">
                                {{-- CSRF Protection --}}
                                @csrf
                                @method('POST')

                                {{-- Units Modal --}}
                                @include('modals.unit.create')

                                <input type="hidden" id="operation" name="operation" value="save">
                                <input type="hidden" id="base_url" value="{{ url('/') }}">
                                <input type="hidden" name="serial_number_json" value=''>
                                <input type="hidden" name="batch_details_json" value=''>
                                <input type="hidden" name="is_service" value='0'>

                                <div class="col-md-4">
                                    <x-label for="item_category_id" name="{{ __('item.category.category') }}" />
                                    <x-dropdown-item-category selected="" :isMultiple=false />
                                </div>
                                <div class="col-md-2">
                                    <x-label for="batch_id" name="व्याच" />
                                    <div class="input-group">
                                        <x-dropdown-batch selected="" />
                                        <button type="button" class="btn btn-outline-primary" data-bs-toggle="modal"
                                            data-bs-target="#batchsModal"><i class="bx bx-plus-circle me-0"></i>
                                    </div>
                                </div>
                                <div class="col-md-4">
                                    <x-label for="program_id" name="कार्यक्रम" />
                                    <div class="input-group">
                                        <x-dropdown-program selected="" :isMultiple=false />
                                        <button type="button" class="btn btn-outline-primary" data-bs-toggle="modal"
                                            data-bs-target="#programModal"><i class="bx bx-plus-circle me-0"></i>
                                        </button>
                                    </div>
                                </div>
                                <div class="col-md-2">
                                    <x-label for="section_id" name="सेक्सन" />
                                    <div class="input-group">
                                        <x-dropdown-section selected="" :isMultiple=false />
                                        <button type="button" class="btn btn-outline-primary" data-bs-toggle="modal"
                                            data-bs-target="#sectionModal"><i class="bx bx-plus-circle me-0"></i>

                                    </div>
                                </div>

                                <div class="col-md-4 d-none">
                                    <x-label for="status" name="{{ __('app.status') }}" />
                                    <x-dropdown-status selected="" dropdownName='status' />
                                </div>

                                <div class="col-md-12 mb-3 item-type-product d-none">
                                    <div class="d-flex align-items-center gap-3">

                                        <x-radio-block id="regular_tracking" boxName="tracking_type"
                                            text="{{ __('item.regular') }}" value="regular" boxType="radio"
                                            parentDivClass="fw-bold" :checked=true />

                                        @if (app('company')['enable_batch_tracking'])
                                            <x-radio-block id="batch_tracking" boxName="tracking_type"
                                                text="{{ __('item.batch_tracking') }}" value="batch" boxType="radio"
                                                parentDivClass="fw-bold" />
                                        @endif



                                    </div>
                                </div>
                                <table class="table table-bordered awesome-table" id="tableCourseFee"
                                    removalCallback="calculateTotalFee" removalCallbackType="post">
                                    <thead>
                                        <tr class="text-center">
                                            <th>S.N.</th>
                                            <th style="min-width:260px;">Fee Heading<i
                                                    class="mandatory always-display">*</i>
                                            </th>
                                            <th width="160">Fee Code<i class="mandatory always-display">*</i>
                                            </th>
                                            <th width="180">Fee Amount  (Rs.)<i class="mandatory always-display">*</i></th>
                                            <th width="180">Total (Rs.)</th>
                                            <th class="has-width" width="120">Action(s)</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr>
                                            <td class="text-center sno">1.</td>
                                            <td>
                                                <div class="select-outline mt-0">
                                                    <x-input type="text" name="name" :required="true" additionalClasses='requiredField' value="" />

                                                </div>
                                                <span class="error"></span>
                                            </td>
                                            <td>
                                                <input type="text" name="item_code"
                                                    class="form-control text-center requiredField">
                                                <span class="error"></span>
                                            </td>
                                            <td>
                                                <input type="number" name="rate" min="0.1" max="99999999"
                                                    class="form-control text-right rate requiredField  entryAmount">
                                                <span class="error"></span>
                                            </td>

                                            <td>
                                                <input type="number" name="total" min="1"
                                                    class="form-control text-right amount entryAmount ignore-readonly" readonly>
                                            </td>
                                            <td class="text-center">
                                                <button type="button" onclick="cloneTableRow('#tableCourseFee')"
                                                    class="btn btn-sm btn-outline-success  px-1">
                                                    <i class="bx bx-plus-circle mr-1"></i>
                                                </button>
                                            </td>
                                        </tr>
                                    </tbody>
                                    <tfoot>
                                        <tr>
                                            <th colspan="4" class="text-right">
                                                <strong>Total (Rs.)</strong>
                                            </th>
                                            <th class="text-right">
                                                <strong>Rs. <span id="totalFee">0.00</span></strong>
                                            </th>
                                            <th></th>
                                        </tr>
                                    </tfoot>
                                </table>
                               
                                <div class="col-md-12">
                                    <div class="d-md-flex d-grid align-items-center gap-3">
                                        <x-button type="button" class="primary px-4 feesaavebutton" text="{{ __('app.submit') }}" buttonId="submit-button" />
                                        <x-anchor-tag href="{{ route('dashboard') }}" text="{{ __('app.close') }}"
                                            class="btn btn-light px-4" />
                                    </div>
                                </div>
                            </form>

                        </div>

                    </div>
                </div>
            </div>
            <!--end row-->
        </div>
    </div>
    <!-- Import Modals -->
    @include('modals.batch.create')
    @include('modals.section.create')
    @include('modals.program.create')
    @include('modals.item.batch-tracking')

@endsection

@section('js')
    <script src="{{ asset('custom/js/items/item.js') }}"></script>
    <script src="{{ asset('custom/js/calculation.js') }}"></script>
    <script src="{{ asset('custom/js/nepaliCurrencySystem.js') }}"></script>
    <script src="{{ asset('custom/js/tableclone.js') }}"></script>
    <script src="{{ asset('custom/js/alartconfig.js') }}"></script>
    <script src="{{ asset('custom/js/custom-valid.js') }}"></script>
    <script src="{{ asset('custom/js/validate.js') }}"></script>
    <script src="{{ asset('custom/js/items/batch-tracking.js') }}"></script>
    <script src="{{ asset('custom/js/modals/tax/tax.js') }}"></script>
    <script src="{{ asset('custom/js/modals/program/program.js') }}"></script>
    <script src="{{ asset('custom/js/modals/section/section.js') }}"></script>
    <script src="{{ asset('custom/js/modals/batch/batch.js') }}"></script>
    <script src="{{ asset('custom/js/modals/unit/unit.js') }}"></script>
@endsection