@php
    $statuses = [
        '0' => ['label' => 'Requested', 'class' => 'info'],
        '1' => ['label' => 'Approved', 'class' => 'success'],
        '2' => ['label' => 'Rejected', 'class' => 'danger'],
        '3' => ['label' => 'Paid', 'class' => 'primary'],
        '4' => ['label' => 'Cancelled', 'class' => 'danger'],
    ];

    $status = $statuses[$officeExpense->status] ?? ['label' => '', 'class' => ''];
    $disabled = in_array($officeExpense->status, ['0', '1', '2', '3']) ? 'disabled' : '';
@endphp

@extends('admin.layouts.layouts')

@section('title', 'Details | Office Expense')

@section('page-css')
    <style>
        .details-table tr {
            border-bottom: 1px solid #e0e0ef;
        }

        .details-table th {
            width: 24%;
        }

        .details-table audio {
            height: 35px;
            width: 80%;
        }

        .ticket-images {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(70px, 1fr));
            gap: 10px;
        }

        .ticket-img,
        .ticket-no-img {
            width: 100%;
            aspect-ratio: 1/1;
            border-radius: 5px;
            box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.5);
            overflow: hidden;
        }

        .ticket-img img {
            width: 100% !important;
            height: 100% !important;
            object-fit: cover;
            border-radius: 5px !important;
        }

        .ticket-no-img {
            background: #392c70;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .ticket-no-img i {
            font-size: 30px;
            color: #ffffff;
        }

        .user-img {
            width: 60px;
            height: 60px;
            object-fit: cover;
            border-radius: 50% !important;
        }
    </style>
@endsection

@section('content')
    {{-- Change status modal --}}
    <div class="modal fade" id="statusChangeModal" tabindex="-1" role="dialog" aria-labelledby="statusChangeModalLabel"
        aria-hidden="true" data-backdrop="static" data-keyboard="false">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="statusChangeModalLabel">Change Office Expense Status</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <form method="POST" id="statusForm" action="javascript:void(0)">
                    @csrf
                    <div class="modal-body">
                        <div class="row">
                            <div class="col-md-12">
                                <input type="hidden" name="status" id="status_value">
                                <div class="form-group">
                                    <label for="remark" class="form-label">Remark <span
                                            class="text-danger">*</span></label>
                                    <textarea type="text" class="form-control" id="remark" name="remark" placeholder="Enter Remark" rows="4"
                                        data-parsley-required data-parsley-trigger='keyup' data-parsley-required-message="Please enter remark."
                                        data-parsley-errors-container='#remark_error'></textarea>
                                    <span class="text-danger error-msg"
                                        id="remark_error">{{ $errors->first('remark') }}</span>
                                </div>
                                <div class="form-group" id="actualAmountGroup" style="display: none;">
                                    <label for="paid_amount" class="form-label">Actual Amount <span
                                            class="text-danger">*</span></label>
                                    <input type="text" class="form-control amount" id="actual_amount"
                                        value="{{ $officeExpense->amount }}" readonly>
                                </div>
                                <div class="form-group" id="paidAmountGroup" style="display: none;">
                                    <label for="paid_amount" class="form-label">Paid Amount <span
                                            class="text-danger">*</span></label>
                                    <input type="text" class="form-control amount" id="paid_amount" name="paid_amount"
                                        placeholder="Enter Paid Amount" data-parsley-required data-parsley-trigger='keyup'
                                        data-parsley-required-message="Please enter paid amount."
                                        data-parsley-errors-container='#paid_amount_error'>
                                    <span class="text-danger error-msg" id="paid_amount_error"></span>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="submit" class="btn btn-primary" id="statusChangeBtn">Update</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <div class="page-header">
        <h3 class="page-title">
            Office Expense
        </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('office-expense.index') }}">Office Expense</a></li>
                <li class="breadcrumb-item active" aria-current="page">Details</li>
            </ol>
        </nav>
    </div>

    {{-- Expense Details --}}
    <div class="container">
        <div class="card shadow-sm rounded border-0">
            <div class="card-header bg-light d-flex justify-content-between align-items-center">
                <h5 class="mb-0 fw-bold">Office Expense Details</h5>
                <div class="d-flex align-items-center">
                    <a href="{{ route('office-expense.generate-pdf', $officeExpense->id) }}"
                        class="btn btn-dark btn-sm pdf-btn mr-2" title="PDF" target="_blank"
                        @if ($officeExpense->status != '3') style="display: none;" @endif>
                        <i class="fa-solid fa-file-pdf"></i>
                    </a>
                    <a href="{{ route('office-expense.index') }}" class="btn btn-primary btn-sm">
                        <i class="fa fa-arrow-left"></i> Back
                    </a>
                </div>
            </div>
            <div class="card-body bg-white">
                <div class="row">
                    <div class="col-md-6">
                        <div class="row mb-2">
                            <div class="col-md-5"><b>Location:</b></div>
                            <div class="col-md-7">{{ $officeExpense->location?->name ?? '-' }}</div>
                        </div>

                        {{-- <div class="row mb-2">
                            <div class="col-md-6"><b>Expense Period:</b></div>
                            <div class="col-md-6">{{ date('d-m-Y', strtotime($officeExpense->from)) }} To
                                {{ date('d-m-Y', strtotime($officeExpense->to)) }}</div>
                        </div> --}}

                        <div class="row mb-2">
                            <div class="col-md-5"><b>Employee Name:</b></div>
                            <div class="col-md-7">{{ $officeExpense->createdBy->name ?? '-' }}</div>
                        </div>

                        <div class="row mb-2">
                            <div class="col-md-5"><b>Status:</b></div>
                            <div class="col-md-7">
                                <span class="badge badge-{{ $status['class'] }} badge-pill">{{ $status['label'] }}</span>
                            </div>
                        </div>

                        @if ($officeExpense->status == '3')
                            <div class="row mb-2">
                                <div class="col-md-5"><b>Voucher No.:</b></div>
                                <div class="col-md-7 voucher-no-row">{{ $officeExpense->voucher_no ?? '' }}</div>
                            </div>
                        @endif
                    </div>

                    <div class="col-md-6">
                        <div class="row mb-2">
                            <input type="hidden" id="total_amt" value="{{ $officeExpense->total_amount ?? 0 }}">
                            <div class="col-md-5"><b>Requested Amount:</b></div>
                            <div class="col-md-7">{{ $officeExpense->total_amount ?? 0 }}</div>
                        </div>

                        @if (in_array($officeExpense->status, ['1', '3']))
                            <div class="row mb-2">
                                <div class="col-md-5"><b>Paid Amount:</b></div>
                                <div class="col-md-7 paid-amount-row">{{ $officeExpense->paid_amount ?? 0 }}</div>
                            </div>

                            <div class="row mb-2">
                                <div class="col-md-5"><b>Payment Mode:</b></div>
                                <div class="col-md-7">{{ ucfirst($officeExpense->payment_mode) ?? '-' }}</div>
                            </div>
                        @endif

                        @if (strtolower($officeExpense->payment_mode) == 'online' && isset($officeExpense->bank))
                            <div class="row mb-2">
                                <div class="col-md-5"><b>Bank:</b></div>
                                <div class="col-md-7 voucher-no-row">
                                    {{ $officeExpense->bank?->name ?? '' }}
                                    ({{ $officeExpense->bank?->account_no ?? '' }})
                                </div>
                            </div>
                        @endif
                    </div>
                </div>
            </div>
        </div>
    </div>

    {{-- Expense Items --}}
    <div class="container py-4">
        <div class="card shadow-sm rounded border-0">
            <div class="card-header bg-light d-flex justify-content-between align-items-center">
                <h5 class="mb-0 fw-bold">Office Expense Items</h5>
            </div>
            <div class="card-body">
                <div class="row">
                    <div class="col-12">
                        <div class="table-responsive">
                            <table id="office-expense-items-table" class="table w-100">
                                <thead>
                                    <tr>
                                        <th>#</th>
                                        <th>Type</th>
                                        <th>Sub Type</th>
                                        <th>Amount</th>
                                        {{-- <th>Payment Mode</th> --}}
                                        <th>Document</th>
                                        {{-- <th>Date</th> --}}
                                        <th>Remark</th>
                                    </tr>
                                </thead>
                                <tbody></tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    {{-- Expense Histories --}}
    <div class="container py-4">
        <div class="card shadow-sm rounded border-0">
            <div class="card-header bg-light d-flex justify-content-between align-items-center">
                <h5 class="mb-0 fw-bold">Office Expense History</h5>
            </div>
            <div class="card-body">
                <div class="row">
                    <div class="col-12">
                        <div class="table-responsive">
                            <table id="office-expense-history-table" class="table w-100">
                                <thead>
                                    <tr>
                                        <th>#</th>
                                        <th>Status</th>
                                        <th>Remark</th>
                                        <th>Action Date</th>
                                        <th>Action By</th>
                                    </tr>
                                </thead>
                                <tbody></tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('page-js')
    <script type="text/javascript">
        var officeExpenseId = "{{ $officeExpense->id }}";
        var indexRoute = "{{ route('office-expense.index') }}";
        var ajaxRoute = "{{ route('office-expense.ajax-list') }}";
        var itemsAjaxRoute = "{{ route('office-expense.item-ajax-list') }}";
        var historyAjaxRoute = "{{ route('office-expense.history-ajax-list') }}";
        var subTypesRoute = "{{ route('expense-sub-type.sub-types-of-expense-type') }}";
        var statusRoute = "{{ route('office-expense.status') }}";
    </script>
    <script src="{{ asset('assets/js/admin/office-expense.js') }}"></script>
@endsection