@php
    $expense_types = $expense_types->pluck('name', 'id') ?? [];
    $payment_modes = ['Cash' => 'Cash', 'Online' => 'Online'];
@endphp

@extends('admin.layouts.layouts')

@section('title', 'Create | My Expenses')

@section('page-css')
    <style>
        .form-check-label {
            margin-bottom: 0px !important;
        }

        .confirmations {
            font-size: 16px !important;
        }
    </style>
@endsection

@section('content')
    <div class="page-header">
        <h3 class="page-title">Create My Expenses</h3>
        <nav aria-label="breadcrumb">
            <ol class="breadcrumb">
                <li class="breadcrumb-item"><a href="{{ route('admin.dashboard') }}">Dashboard</a></li>
                <li class="breadcrumb-item"><a href="{{ route('my-expenses.index') }}">My Expenses</a></li>
                <li class="breadcrumb-item active" aria-current="page">Create</li>
            </ol>
        </nav>
    </div>

    <div class="row">
        <div class="col-12">
            <div class="card">

                {!! Form::open([
                    'route' => 'my-expenses.store',
                    'method' => 'POST',
                    'id' => 'create_form',
                    'class' => 'forms-sample',
                    'enctype' => 'multipart/form-data',
                    'autocomplete' => 'off',
                ]) !!}

                @csrf

                <div class="card-body">
                    <div class="date-range-container">
                        <div class="row">
                            <div class="col-md-12">
                                {!! Form::label('', 'Expense Period') !!}
                            </div>
                            <div class="col-md-4">
                                <div class="form-group">
                                    {!! Form::label('from', 'From', ['class' => 'form-label']) !!}
                                    {!! Form::text('from', '', [
                                        'id' => 'from',
                                        'class' => 'form-control',
                                        'placeholder' => 'Select From Date',
                                        'data-parsley-required' => 'true',
                                        'data-parsley-required-message' => 'Please select from date.',
                                    ]) !!}
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="form-group">
                                    {!! Form::label('to', 'To', ['class' => 'form-label']) !!}
                                    {!! Form::text('to', '', [
                                        'id' => 'to',
                                        'class' => 'form-control',
                                        'placeholder' => 'Select To Date',
                                        'data-parsley-required' => 'true',
                                        'data-parsley-required-message' => 'Please select to date.',
                                    ]) !!}
                                </div>
                            </div>

                            <div class="col-md-4">
                                <div class="form-group">
                                    {!! Form::label('expense_limit', 'Expense Limit', ['class' => 'form-label']) !!}
                                    {!! Form::text('', $remainingExpenseLimit, [
                                        'id' => 'expense_limit',
                                        'class' => 'form-control',
                                        'placeholder' => 'Expense Limit',
                                        'readonly' => true
                                    ]) !!}
                                </div>
                            </div>
                        </div>
                    </div>

                    {{-- Expenses --}}
                    <div id="expense-items-container">
                        <div class="expense-item-group border rounded px-3 pt-4 mb-4" id="expense-item-group-1">
                            <div class="row">
                                <div class="col-md-4">
                                    <div class="form-group">
                                        {!! Form::label('expense_type_1', 'Expense Type', ['class' => 'form-label']) !!} <span class="text-danger">*</span>
                                        {!! Form::select('expense_type[]', $expense_types, '', [
                                            'id' => 'expense_type_1',
                                            'class' => 'form-control expense_type',
                                            'placeholder' => 'Select Expense Type',
                                            'data-parsley-required' => 'true',
                                            'data-parsley-required-message' => 'Please select expense type.',
                                        ]) !!}
                                        <div class="text-danger" id="expense_type_1_error"></div>
                                    </div>
                                </div>
                                <div class="col-md-4">
                                    <div class="form-group">
                                        {!! Form::label('expense_sub_type_1', 'Expense Sub Type', ['class' => 'form-label']) !!} <span class="text-danger">*</span>
                                        {!! Form::select('expense_sub_type[]', [], '', [
                                            'id' => 'expense_sub_type_1',
                                            'class' => 'form-control expense_sub_type',
                                            'placeholder' => 'Select Expense Sub Type',
                                            'data-parsley-required' => 'true',
                                            'data-parsley-required-message' => 'Please select expense sub type.',
                                        ]) !!}
                                    </div>
                                </div>
                                <div class="col-md-4">
                                    <div class="form-group">
                                        {!! Form::label('date_1', 'Date', ['class' => 'form-label']) !!} <span class="text-danger">*</span>
                                        {!! Form::text('date[]', '', [
                                            'id' => 'date_1',
                                            'class' => 'form-control date',
                                            'placeholder' => 'Select Expense Date',
                                            'data-parsley-required' => 'true',
                                            'data-parsley-required-message' => 'Please select expense date.',
                                            'data-parsley-errors-container' => '#date_1_error',
                                        ]) !!}
                                        <div class="error text-danger" id="date_1_error"></div>
                                    </div>
                                </div>
                                <div class="col-md-4">
                                    <div class="form-group">
                                        {!! Form::label('amount_1', 'Amount', ['class' => 'form-label']) !!} <span class="text-danger">*</span>
                                        {!! Form::text('amount[]', '', [
                                            'id' => 'amount_1',
                                            'class' => 'form-control amount',
                                            'placeholder' => 'Enter Expense Amount',
                                            'data-parsley-required' => 'true',
                                            'data-parsley-required-message' => 'Please enter expense amount.',
                                        ]) !!}
                                    </div>
                                </div>
                                <div class="col-md-4">
                                    <div class="form-group">
                                        {!! Form::label('payment_mode_1', 'Payment Mode', ['class' => 'form-label']) !!} <span class="text-danger">*</span>
                                        {!! Form::select('payment_mode[]', $payment_modes, '', [
                                            'id' => 'payment_mode_1',
                                            'class' => 'form-control payment_mode',
                                            'placeholder' => 'Select Payment Mode',
                                            'data-parsley-required' => 'true',
                                            'data-parsley-required-message' => 'Please select payment mode.',
                                        ]) !!}
                                    </div>
                                </div>
                                <div class="col-md-4">
                                    <div class="form-group">
                                        {!! Form::label('document_1', 'Document', ['class' => 'form-label']) !!} <span class="text-danger">*</span>
                                        {!! Form::file('document[]', [
                                            'id' => 'document_1',
                                            'class' => 'form-control',
                                            'data-parsley-trigger' => 'change',
                                            'data-parsley-required' => 'true',
                                            'data-parsley-max-file-size' => '5',
                                            'data-parsley-filetype' => 'png,jpg,jpeg',
                                            'data-parsley-required-message' => 'Please upload document.',
                                            'data-parsley-max-file-size-message' => 'File size must not exceed 5 MB.',
                                            'data-parsley-filetype-message' => 'Only .png, .jpg and .jpeg files are allowed.',
                                        ]) !!}
                                    </div>
                                </div>
                                <div class="col-md-12">
                                    <div class="form-group">
                                        {!! Form::label('remark_1', 'Remark', ['class' => 'form-label']) !!} <span class="text-danger">*</span>
                                        {!! Form::textarea('remark[]', '', [
                                            'rows' => 4,
                                            'id' => 'remark_1',
                                            'class' => 'form-control remark',
                                            'placeholder' => 'Enter Remark',
                                            'data-parsley-required' => 'true',
                                            'data-parsley-required-message' => 'Please enter remark.',
                                        ]) !!}
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    {{-- Add more expense --}}
                    <div class="add-btn-container mt-3">
                        <div class="row col-md-12">
                            <a class="btn btn-sm btn-info" id="addMore">Add More</a>
                        </div>
                    </div>

                    {{-- Confirmation Checkboxes --}}
                    <hr>
                    <div class="row">
                        <div class="col-md-12">
                            <div class="form-group">
                                <strong>
                                    <label class="form-label confirmations">Confirmations <span
                                            class="text-danger">*</span></label>
                                </strong>
                                {{-- <div class="form-check form-check-inline d-flex align-items-center">
                                    <input class="form-check-input confirm-checkbox" type="checkbox" id="confirm_1"
                                        name="confirm_1" value="1">
                                    <label class="form-check-label ml-1" for="confirm_1">
                                        I confirm that the Period of Current Claim is correct.
                                    </label>
                                </div>
                                <div class="form-check form-check-inline d-flex align-items-center">
                                    <input class="form-check-input confirm-checkbox" type="checkbox" id="confirm_2"
                                        name="confirm_2" value="1">
                                    <label class="form-check-label ml-1" for="confirm_2">
                                        I confirm that the All Supporting Documents provided is correct.
                                    </label>
                                </div>
                                <div class="form-check form-check-inline d-flex align-items-center">
                                    <input class="form-check-input confirm-checkbox" type="checkbox" id="confirm_3"
                                        name="confirm_3" value="1">
                                    <label class="form-check-label ml-1" for="confirm_3">
                                        I confirm that there is no previous pending claim for any same bill for this
                                        reimbursement
                                        prior to current claim period.
                                    </label>
                                </div>
                                <div class="form-check form-check-inline d-flex align-items-center">
                                    <input class="form-check-input confirm-checkbox" type="checkbox" id="confirm_4"
                                        name="confirm_4" value="1">
                                    <label class="form-check-label ml-1" for="confirm_4">
                                        I swear that all the documents I am submitting are original and correct. There is no
                                        wrong payment of any kind in this and if any is found in the future, I am bound to
                                        refund the amount paid along with 200% penalty.
                                    </label>
                                </div> --}}
                                <div class="form-check d-flex align-items-start">
                                    <input class="form-check-input ml-1" type="checkbox" id="confirm_all" name="confirm_all" value="1">
                                    <label class="form-check-label ml-2" for="confirm_all">
                                        <span class="d-block mb-2 ml-3">
                                            By checking this box, I confirm that I have read and agreed to the following Terms & Conditions:
                                        </span>
                                        <ul class="mb-0 pl-3 ml-2">
                                            <li>I confirm that the Period of Current Claim is correct.</li>
                                            <li>I confirm that all Supporting Documents provided are correct.</li>
                                            <li>I confirm that there is no previous pending claim for any same bill for this reimbursement prior to current claim period.</li>
                                            <li>I swear that all the documents I am submitting are original and correct. There is no wrong payment of any kind in this and if any is found in the future, I am bound to refund the amount paid along with 200% penalty.</li>
                                        </ul>
                                    </label>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="card-footer">
                    <button type="submit" class="btn btn-primary mr-2" id="save_btn" disabled>Save</button>
                    <a href="{{ route('my-expenses.index') }}" class="btn btn-light">Cancel</a>
                </div>

                {{ Form::close() }}

            </div>
        </div>
    </div>
@endsection

@section('page-js')
    <script>
        var expenseID = "";
        var indexRoute = "{{ route('my-expenses.index') }}";
        var ajaxRoute = "{{ route('my-expenses.ajax-list') }}";
        var storeRoute = "{{ route('my-expenses.store') }}";
        var subTypesRoute = "{{ route('expense-sub-type.sub-types-of-expense-type') }}";
        var calculateLimitRoute = "{{ route('my-expenses.calculate-limit') }}";
        var expenseTypes = @json($expense_types);
    </script>

    <script src="{{ asset('assets/js/admin/expense.js') }}"></script>
@endsection