@extends('backend.layouts.app')
@section('title', @$data['title'])

@section('content')
    {!! breadcrumb([
        'title' => @$data['title'],
        route('admin.dashboard') => _trans('common.Dashboard'),
        '#' => @$data['title'],
    ]) !!}

    @include('travel::travel-plans.nav', ['plan_id' => $data['plan_id'], 'is_approved' => true])

    <div class="card ot-card">
        <div class="card-body">
            <form 
                method="POST" 
                action="{{ route('travel.plans.expenses.store', $data['plan_id']) }}" 
                enctype="multipart/form-data" 
                autocomplete="off"
            >
                @csrf

                <div class="col-md-12">
                    <div class="row form-group mb-5 text-start">
                        <label class="col-md-4 col-lg-3 col-xl-2 form-label pt-3 text-end"></label>
                        <div class="col-md-8 col-lg-9 col-xl-10 bg-light p-3">
                            <h3>{{ _trans('common.New Expense Form') }}</h3>
                        </div>
                    </div>
                    <div class="row form-group mb-3 text-start">
                        <label for="date" class="col-md-4 col-lg-3 col-xl-2 form-label pt-3 text-end">{{ _trans('common.Date') }} <span class="text-danger">*</span></label>
                        <div class="col-md-8 col-lg-9 col-xl-10">
                            <input type="date" name="date" class="form-control ot-form-control ot-input" value="{{ old('date', date('Y-m-d')) }}" required>
                            @if ($errors->has('date'))
                                <span class="error text-danger">
                                    {{ $errors->first('date') }}
                                </span>
                            @endif
                        </div>
                    </div>
                    {{-- <div class="row form-group mb-3 text-start">
                        <label for="mode_of_transportation" class="col-md-4 col-lg-3 col-xl-2 form-label pt-3 text-end">{{ _trans('common.Mode Of Transportation') }}</label>
                        <div class="col-md-8 col-lg-9 col-xl-10">
                            <select name="mode_of_transportation" class="form-control ot-form-control ot-input select2">
                                <option value="" selected disabled>{{ _trans('common.Select') }}</option>
                                @foreach ($data['modeOfTransportations'] ?? [] as $modeOfTransportation)
                                    <option value="{{ $modeOfTransportation }}" {{ old('mode_of_transportation') == $modeOfTransportation ? 'selected' : '' }}>{{ $modeOfTransportation }}</option>
                                @endforeach
                            </select>
                            @if ($errors->has('mode_of_transportation'))
                                <span class="error text-danger">
                                    {{ $errors->first('mode_of_transportation') }}
                                </span>
                            @endif
                        </div>
                    </div> --}}

                    <div class="row  mt-5">
                        <small class="col-md-4 col-lg-3 col-xl-2 text-muted">
                        </small>
                        <div class="col-md-8 col-lg-9 col-xl-10">
                            <a href="{{ route('hrm.deposit_category.expense') }}" class="text-primary text-sm" target="_blank">
                                {{ _trans('common.Add Travel Expense Category') }}
                                <i class="las la-external-link-alt"></i>
                            </a>
                        </div>
                    </div>

                    <div class="mb-5">
                        <div class="mb-5">
                            <div class="row form-group mb-3 text-start">
                                <label for="amount" class="col-md-4 col-lg-3 col-xl-2 form-label pt-3 text-end">
                                    {{ _trans('common.Expenses') }}
                                </label>
                                <div class="col-md-8 col-lg-9 col-xl-10">
                                    <div class="card border p-3 shadow-sm">
                                        <div class="card-body">
                                            <div class="table-responsive">
                                                <table class="table table-borderless">
                                                    <thead>
                                                        <tr>
                                                            <th>{{ _trans('common.Category') }} <span class="text-danger">*</span></th>
                                                            <th>{{ _trans('common.Title') }} <span class="text-danger">*</span></th>
                                                            <th>{{ _trans('common.Amount') }} <span class="text-danger">*</span></th>
                                                            <th>{{ _trans('common.File') }}</th>
                                                            <th>{{ _trans('common.Remark') }}</th>
                                                            <th>{{ _trans('common.Action') }}</th>
                                                        </tr>
                                                    </thead>
                                                    <tbody id="expenses">
                                                        <tr class="{{ count(old('expense_category_id') ?? []) ? '' : 'd-none' }}" id="noExpenseFound">
                                                            <td colspan="30">
                                                                <div class="bg-light py-3 text-center">
                                                                    <h5 class="text-danger fs-5 mb-0">{{ _trans('common.No expenses found!') }}</h5>
                                                                    <span>{{ _trans('common.Atleast one expense is required') }}</span>
                                                                </div>
                                                            </td>
                                                        </tr>
                                                        @if (old('expense_category_id'))
                                                            @foreach (old('expense_category_id') ?? [] as $key => $expense_category_id)
                                                                <tr class="expense">
                                                                    <td width="250">
                                                                        <select name="expense_category_id[]" class="form-control ot-form-control ot-input select2" required data-placeholder="{{ _trans('common.Select Category') }}">
                                                                            <option value=""></option>
                                                                            @foreach ($data['expenseCategories'] ?? [] as $key => $expenseCategory)
                                                                                <option value="{{ $expenseCategory->id }}" {{ $expenseCategory->id == $expense_category_id ? 'selected' : '' }}>
                                                                                    {{ $expenseCategory->name }}
                                                                                </option>
                                                                            @endforeach
                                                                        </select>
                                                                    </td>
                                                                    <td>
                                                                        <input type="text" name="title[]" class="form-control ot-form-control ot-input" value="{{ old('title')[$key] }}" required>
                                                                    </td>
                                                                    <td width="150">
                                                                        <input type="number" name="amount[]"  class="form-control ot-form-control ot-input" value="{{ old('amount')[$key] }}" step="0.01" min="0" required>
                                                                    </td>
                                                                    <td width="220">
                                                                        <input type="file" name="file[]" class="form-control ot-form-control ot-input">
                                                                    </td>
                                                                    <td>
                                                                        <input type="text" name="remark[]" class="form-control ot-form-control ot-input" value="{{ old('remark')[$key] }}">
                                                                    </td>
                                                                    <td width="40">
                                                                        <button type="button" onclick="removeExpense(this)" class="btn fs-2 p-0 px-2 text-danger">
                                                                            <i class="las la-times"></i>
                                                                        </button>
                                                                    </td>
                                                                </tr>
                                                            @endforeach
                                                        @else
                                                            <tr class="expense">
                                                                <td width="250">
                                                                    <select name="expense_category_id[]" class="form-control ot-form-control ot-input select2" required data-placeholder="{{ _trans('common.Select Category') }}">
                                                                        <option value=""></option>
                                                                        @foreach ($data['expenseCategories'] ?? [] as $key => $expenseCategory)
                                                                            <option value="{{ $expenseCategory->id }}">{{ $expenseCategory->name }}</option>
                                                                        @endforeach
                                                                    </select>
                                                                </td>
                                                                <td>
                                                                    <input type="text" name="title[]" class="form-control ot-form-control ot-input" required>
                                                                </td>
                                                                <td width="150">
                                                                    <input type="number" name="amount[]"  class="form-control ot-form-control ot-input" step="0.01" min="0" required>
                                                                </td>
                                                                <td width="220">
                                                                    <input type="file" name="file[]" class="form-control ot-form-control ot-input">
                                                                </td>
                                                                <td>
                                                                    <input type="text" name="remark[]" class="form-control ot-form-control ot-input">
                                                                </td>
                                                                <td width="40">
                                                                    <button type="button" onclick="removeExpense(this)" class="btn fs-2 p-0 px-2 text-danger">
                                                                        <i class="las la-times"></i>
                                                                    </button>
                                                                </td>
                                                            </tr>
                                                        @endif
                                                    </tbody>
                                                </table>
                                            </div>
                                            <button type="button" onclick="addExpense()" class="btn btn-dark d-flex align-items-center gap-2 ms-2 mb-3">
                                                <i class="las la-plus fs-5"></i>
                                                {{ _trans('common.Add Expense') }}
                                            </button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="row form-group mb-3 text-start">
                        <label for="rating_of_travel_experience" class="col-md-4 col-lg-3 col-xl-2 form-label pt-3 text-end">{{ _trans('common.Rate Your Travel Experience') }}</label>
                        <div class="col-md-8 col-lg-9 col-xl-10">
                            <select name="rating_of_travel_experience" class="form-control select2">
                                <option value="" selected></option>
                                <option value="1" {{ old('rating_of_travel_experience') == 1 ? 'selected' : '' }}>1</option>
                                <option value="2" {{ old('rating_of_travel_experience') == 2 ? 'selected' : '' }}>2</option>
                                <option value="3" {{ old('rating_of_travel_experience') == 3 ? 'selected' : '' }}>3</option>
                                <option value="4" {{ old('rating_of_travel_experience') == 4 ? 'selected' : '' }}>4</option>
                                <option value="5" {{ old('rating_of_travel_experience') == 5 ? 'selected' : '' }}>5</option>
                            </select>
                            @if ($errors->has('rating_of_travel_experience'))
                                <span class="error text-danger">
                                    {{ $errors->first('rating_of_travel_experience') }}
                                </span>
                            @endif
                        </div>
                    </div>
                    <div class="d-flex justify-content-end gap-2 mt-5">
                        <a href="{{ route('travel.plans.expenses.index', $data['plan_id']) }}" class="btn btn-secondary d-flex align-items-center gap-2">
                            <i class="las la-arrow-left fs-4"></i> 
                            {{ _trans('common.Back to list') }}
                        </a>
                        <button class="btn btn-gradian d-flex align-items-center gap-2" id="submitBtn"><i class="las la-check fs-4"></i> {{ _trans('common.Submit') }}</button>
                    </div>
                </div>
            </form>
        </div>
    </div>
@endsection

@section('script')
    @include('travel::travel-expenses.script')
@endsection