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

@extends('admin.layouts.layouts')

@section('title', 'Edit | 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">Edit 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">Edit</li>
            </ol>
        </nav>
    </div>

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

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

                @csrf
                @method('PUT')

                <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', date('d-m-Y', strtotime($expense->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', date('d-m-Y', strtotime($expense->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">
                        @if (isset($expense->expenseItems) && count($expense->expenseItems) > 0)
                            @foreach ($expense->expenseItems as $key => $expense_item)
                                @php
                                    $expense_type_id = $expense_item->expanse_type_id ?? '';
                                    $expense_sub_type_id = $expense_item->expanse_sub_type_id ?? '';
                                    $document = $expense_item->document ?? '';
                                    $sub_types =
                                        $expense_sub_types
                                            ->where('expanse_type_id', $expense_type_id)
                                            ->pluck('name', 'id')
                                            ->toArray() ?? [];
                                @endphp
                                <div class="expense-item-group border rounded px-3 pt-4 mb-4"
                                    id="expense-item-group-{{ $key + 1 }}">
                                    <div class="row">
                                        @if ($key != 0)
                                            <div class="col-md-12 text-right">
                                                <a type="button" class="btn btn-danger btn-sm remove-expense"
                                                    data-target="#expense-item-group-{{ $key + 1 }}">
                                                    <i class="fa fa-trash"></i>
                                                </a>
                                            </div>
                                        @endif
                                        <div class="col-md-4">
                                            <div class="form-group">
                                                {!! Form::label('expense_type_' . ($key + 1), 'Expense Type', ['class' => 'form-label']) !!} <span class="text-danger">*</span>
                                                {!! Form::select('expense_type[]', $expense_types, $expense_type_id, [
                                                    'id' => 'expense_type_' . ($key + 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_{{ $key + 1 }}_error"></div>
                                            </div>
                                        </div>
                                        <div class="col-md-4">
                                            <div class="form-group">
                                                {!! Form::label('expense_sub_type_' . ($key + 1), 'Expense Sub Type', ['class' => 'form-label']) !!} <span class="text-danger">*</span>
                                                {!! Form::select('expense_sub_type[]', $sub_types, $expense_sub_type_id, [
                                                    'id' => 'expense_sub_type_' . ($key + 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_' . ($key + 1), 'Date', ['class' => 'form-label']) !!} <span class="text-danger">*</span>
                                                {!! Form::text('date[]', date('d-m-Y', strtotime($expense_item->date)), [
                                                    'id' => 'date_' . ($key + 1),
                                                    'class' => 'form-control date',
                                                    'placeholder' => 'Select Expense Date',
                                                    'data-parsley-required' => 'true',
                                                    'data-parsley-required-message' => 'Please select expense date.',
                                                ]) !!}
                                            </div>
                                        </div>
                                        <div class="col-md-4">
                                            <div class="form-group">
                                                {!! Form::label('amount_' . ($key + 1), 'Amount', ['class' => 'form-label']) !!} <span class="text-danger">*</span>
                                                {!! Form::text('amount[]', $expense_item->amount, [
                                                    'id' => 'amount_' . ($key + 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_' . ($key + 1), 'Payment Mode', ['class' => 'form-label']) !!} <span class="text-danger">*</span>
                                                {!! Form::select('payment_mode[]', $payment_modes, $expense_item->payment_mode, [
                                                    'id' => 'payment_mode_' . ($key + 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_' . ($key + 1), 'Document', ['class' => 'form-label']) !!}
                                                <div class="input-group">
                                                    {!! Form::file('document[]', [
                                                        'id' => 'document_' . ($key + 1),
                                                        'class' => 'form-control',
                                                        'data-parsley-trigger' => 'change',
                                                        'data-parsley-max-file-size' => '5',
                                                        'data-parsley-filetype' => 'png,jpg,jpeg',
                                                        '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.',
                                                    ]) !!}
                                                    @if (!empty($document) && file_exists(public_path('storage/' . $document)))
                                                        <div class="input-group-append">
                                                            <img src="{{ asset('storage/' . $document) }}"
                                                                alt="Aadhar Front" width="65" height="65"
                                                                class="crudEdit img-thumbnail me-3">
                                                        </div>
                                                    @else
                                                        <img src="{{ asset('assets/images/noimage/no-image.jpeg') }}"
                                                            alt="No Image" width="65" height="65"
                                                            class="crudEdit img-thumbnail me-3">
                                                    @endif
                                                </div>
                                                {!! Form::hidden('old_document[]', $document) !!}
                                            </div>
                                        </div>
                                        <div class="col-md-12">
                                            <div class="form-group">
                                                {!! Form::label('remark_' . ($key + 1), 'Remark', ['class' => 'form-label']) !!} <span class="text-danger">*</span>
                                                {!! Form::textarea('remark[]', $expense_item->remark, [
                                                    'rows' => 4,
                                                    'id' => 'remark_' . ($key + 1),
                                                    'class' => 'form-control remark',
                                                    'placeholder' => 'Enter Remark',
                                                    'data-parsley-required' => 'true',
                                                    'data-parsley-required-message' => 'Please enter remark.',
                                                ]) !!}
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            @endforeach
                        @endif
                    </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 d-flex align-items-start">
                                    <input class="form-check-input ml-1" type="checkbox" id="confirm_all" name="confirm_all" value="1" {{ $expense->confirm_1 == 1 ? 'checked' : '' }}>
                                    <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="update_btn" disabled>Update</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 = "{{ $expense->id }}";
        var indexRoute = "{{ route('my-expenses.index') }}";
        var ajaxRoute = "{{ route('my-expenses.ajax-list') }}";
        var updateRoute = "{{ route('my-expenses.update', ':id') }}";
        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