@extends('layouts.app', ['class' => 'g-sidenav-show bg-gray-100'])

@section('content')
    @include('layouts.navbars.auth.topnav', ['title' => 'Expenses'])
    <div class="container-fluid py-4">
        <div class="row">
            <div class="col-md-12">
                <div class="card">
                    <form role="form" method="POST" id="expenseForm" action="{{ route('event-expense-save') }}"
                        enctype="multipart/form-data">
                        @csrf
                        <input type="hidden" name="eventId" value="{{$eventId}}">
                        <div id="editPart">
                            <div class="card-header pb-0">
                                <div class="d-flex align-items-center justify-content-between">
                                    <p class="mb-0">Expense Details</p>
                                    <p class="text-white badge bg-primary"><span class="text-md">Total : ₹{{$totalExpense ?? 0}} </span></p>
                                </div>
                            </div>
                            <div class="card-body">
                                <div class="row">
                                    <!-- Expense Name -->
                                    <div class="col-md-4">
                                        <div class="form-group">
                                            <label for="expense_name" class="form-control-label">Expense Name</label>
                                            <input class="form-control @error('expense_name') is-invalid @enderror"
                                                type="text" id="expense_name" name="expense_name"
                                                placeholder="Enter Expense Name" value="{{ old('expense_name') }}">
                                            @error('expense_name')
                                                <div class="invalid-feedback">{{ $message }}</div>
                                            @enderror
                                        </div>
                                    </div>

                                    <div class="col-md-4">
                                        <div class="form-group">
                                            <label for="expense_type" class="form-control-label">Expense Type</label>
                                            <select class="form-select w-100" name="expense_type" id="expense_type" required>
                                                <option value="" disabled selected>Select or type a new Type</option>
                                                @foreach ($type as $data)
                                                    <option value="{{ $data->id }}" {{ old('expense_type') == $data->id ? 'selected' : '' }}>{{ $data->type }}
                                                    </option>
                                                @endforeach
                                            </select>

                                            @error('expense_type')
                                                <div class="invalid-feedback">{{ $message }}</div>
                                            @enderror
                                        </div>
                                    </div>

                                    <!-- Expense Date -->
                                    <div class="col-md-4">
                                        <div class="form-group">
                                            <label for="expense_date" class="form-control-label">Expense Date</label>
                                            <input class="form-control @error('expense_date') is-invalid @enderror"
                                                type="date" id="expense_date" name="expense_date"
                                                value="{{ old('expense_date') }}">
                                            @error('expense_date')
                                                <div class="invalid-feedback">{{ $message }}</div>
                                            @enderror
                                        </div>
                                    </div>

                                    <!-- Expense Amount -->
                                    <div class="col-md-4">
                                        <div class="form-group">
                                            <label for="expense_amount" class="form-control-label">Amount</label>
                                            <input class="form-control @error('expense_amount') is-invalid @enderror"
                                                type="number" id="expense_amount" name="expense_amount" step="0.01"
                                                placeholder="Enter Amount" value="{{ old('expense_amount') }}">
                                            @error('expense_amount')
                                                <div class="invalid-feedback">{{ $message }}</div>
                                            @enderror
                                        </div>
                                    </div>

                                    <!-- Payment Method -->
                                    <div class="col-md-4">
                                        <div class="form-group">
                                            <label for="payment_method" class="form-control-label">Payment Method</label>
                                            <select class="form-select @error('payment_method') is-invalid @enderror"
                                                name="payment_method" id="payment_method" required>
                                                <option value="" disabled selected>Select Payment Method</option>
                                                <option value="Cash" {{ old('payment_method') == 'Cash' ? 'selected' : '' }}>
                                                    Cash
                                                </option>
                                                <option value="Bank Transfer" {{ old('payment_method') == 'Bank Transfer' ? 'selected' : '' }}>Bank Transfer
                                                </option>
                                                <option value="Online" {{ old('payment_method') == 'Online' ? 'selected' : '' }}>Online</option>
                                                <option value="Credit Card" {{ old('payment_method') == 'Credit Card' ? 'selected' : '' }}>Credit Card</option>
                                            </select>
                                            @error('payment_method')
                                                <div class="invalid-feedback">{{ $message }}</div>
                                            @enderror
                                        </div>
                                    </div>

                                    <!-- Description -->
                                    <div class="col-md-4">
                                        <div class="form-group">
                                            <label for="description" class="form-control-label">Description</label>
                                            <textarea class="form-control @error('description') is-invalid @enderror"
                                                id="description" name="description" rows="1"
                                                placeholder="Enter a brief description of the expense">{{ old('description') }}</textarea>
                                            @error('description')
                                                <div class="invalid-feedback">{{ $message }}</div>
                                            @enderror
                                        </div>
                                    </div>

                                    <!-- Supporting Document Upload -->
                                    <div class="col-md-4">
                                        <div class="form-group">
                                            <label for="expense_file" class="form-control-label">Supporting Document</label>
                                            <input class="form-control @error('expense_file') is-invalid @enderror"
                                                type="file" id="expense_file" name="expense_file">
                                            @error('expense_file')
                                                <div class="invalid-feedback">{{ $message }}</div>
                                            @enderror
                                        </div>
                                    </div>

                                    <!-- Status -->
                                    {{-- <div class="col-md-4">
                                        <div class="form-group">
                                            <label for="status" class="form-control-label">Status</label>
                                            <select class="form-select @error('status') is-invalid @enderror" name="status"
                                                id="status" required>
                                                <option value="Pending" {{ old('status')=='Pending' ? 'selected' : '' }}>
                                                    Pending
                                                </option>
                                                @if (auth()->user()->user_role == 'A')
                                                <option value="Approved" {{ old('status')=='Approved' ? 'selected' : '' }}>
                                                    Approved</option>
                                                <option value="Rejected" {{ old('status')=='Rejected' ? 'selected' : '' }}>
                                                    Rejected</option>
                                                @endif
                                            </select>
                                            @error('status')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                            @enderror
                                        </div>
                                    </div> --}}

                                </div>
                                <div>
                                    
                                    <button type="submit" class="btn btn-primary btn-sm">Save</button>
                                    <a href="{{ route('event-index') }}"
                                        class="btn btn-secondary btn-sm mb-3">Cancel</a>
                                        <button type="button" class="btn btn-primary btn-sm"
                                        onclick="location.reload();">New</button>
                                </div>
                            </div>
                        </div>
                </div>
                <div class="table-responsive">
                    <table class="table table borderd" id="myTable1">
                        <thead>
                            <tr>
                                <th class="text-center">Expense Name</th>
                                <th class="text-center">Expense Type</th>
                                <th class="text-center">Expense Date</th>
                                <th class="text-center">Expense Amount</th>
                                <th class="text-center">Payment Method</th>
                                <th class="text-center">Description</th>
                                <th class="text-center">File</th>
                                <th class="text-center">Action</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach ($expense as $data)                                                                    
                                <tr>
                                    <td class="text-center">{{$data->expense_name ?? ''}} </td>
                                    <td class="text-center">{{$data->exp_type->type ?? ''}} </td>
                                    <td class="text-center">
                                        {{$data->expense_date ? \Carbon\Carbon::parse($data->expense_date)->format('d-m-Y') : ''}}
                                    </td>
                                    <td class="text-center">{{$data->expense_amount ?? ''}} </td>
                                    <td class="text-center">{{$data->payment_method ?? ''}} </td>
                                    <td class="text-center text-wrap">{{$data->description ?? ''}} </td>
                                    <td class="text-center">
                                        @if($data->expense_file)
                                            <a href="{{ route('stream.file', ['filename' => $data->expense_file]) }}"
                                                target="_blank">
                                                <i class="fa fa-solid fa-eye"></i>
                                            </a>
                                        @else
                                            No File
                                        @endif
                                    </td>
                                    <td class="text-center">
                                        <a href="javascript:void(0);" data-bs-toggle="tooltip" data-bs-placement="top"
                                            title="Edit" class="edit-expense" data-id="{{ $data->id }}">
                                            <i class="fa-solid fa-pen-to-square"></i>
                                        </a>
                                        <a href="javascript:void(0);" data-bs-toggle="tooltip" data-bs-placement="top"
                                            title="Delete" class="delete-expense" data-id="{{ $data->id }}"><i
                                                class="fa-solid fa-trash"></i></a>
                                    </td>
                                    </td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
                </form>
            </div>
        </div>
    </div>
    </div>
@endsection
@push('scripts')
    <script>
        $(document).ready(function () {
            $('#expense_type').select2({
                placeholder: "Select or type a new type",
                tags: true,
                tokenSeparators: [','],
                createTag: function (params) {
                    return {
                        id: params.term,
                        text: params.term
                    };
                }
            });
        });
    </script>
    <script>
        $('.edit-expense').click(function () {
            let expenseId = $(this).data('id');

            $.ajax({
                url: "{{ route('get-expense') }}",
                type: "GET",
                data: { id: expenseId },
                success: function (response) {
                    if (response.success) {
                        let expense = response.data;

                        $('#expense_name').val(expense.expense_name);
                        $('#expense_type').val(expense.expense_type).trigger('change');
                        $('#expense_date').val(expense.expense_date);
                        $('#expense_amount').val(expense.expense_amount);
                        $('#payment_method').val(expense.payment_method).trigger('change');
                        $('#description').val(expense.description);
                        $('#status').val(expense.status).trigger('change');

                        // Add a hidden input for ID
                        if ($('#expense_id').length === 0) {
                            $('<input>').attr({
                                type: 'hidden',
                                id: 'expense_id',
                                name: 'expense_id',
                                value: expense.id
                            }).appendTo('form');
                        } else {
                            $('#expense_id').val(expense.id);
                        }
                        $('html, body').animate({
                            scrollTop: $("#editPart").offset().top
                        }, 500);
                    } else {
                        alert('Expense details not found!');
                    }
                },
                error: function () {
                    alert('Error fetching data!');
                }
            });
        });

    </script>
    <script>
        $(document).on('click', '.delete-expense', function () {
            let expenseId = $(this).data('id');
            if (!confirm('Are you sure you want to delete this expense?')) {
                return;
            }
            $.ajax({
                url: "{{ route('delete-expense') }}",
                type: "DELETE",
                data: {
                    id: expenseId,
                    _token: "{{ csrf_token() }}"
                },
                success: function (response) {
                    if (response.success) {
                        toastr.success(response.message);
                        setTimeout(() => location.reload(), 800);
                    } else {
                        toastr.error(response.message);
                    }
                },
                error: function () {
                    toastr.error('Error deleting expense!');
                }
            });
        });

    </script>
    <script>
        document.addEventListener("DOMContentLoaded", function () {
            var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'));
            var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
                return new bootstrap.Tooltip(tooltipTriggerEl);
            });
        });
    </script>
@endpush