@extends('layouts.app')

@section('title', 'Expense Manager')

@section('panel-actions')
    @if(auth()->user()->canAccess('expenses.create'))
    <button type="button" class="btn btn-primary btn-sm px-3 shadow-sm" data-toggle="modal" data-target="#addExpenseModal">
        <i class="fas fa-plus mr-1"></i> Submit New Expense
    </button>
    @endif
@endsection

@section('content')
<div class="row">
    <!-- Summary Widgets -->
    <div class="col-md-4 col-sm-6 col-12">
        <div class="info-box bg-info shadow-sm">
            <span class="info-box-icon"><i class="fas fa-hand-holding-usd"></i></span>
            <div class="info-box-content">
                <span class="info-box-text">Settled Total</span>
                <span class="info-box-number"><span class="currency-symbol">{{ $settings->currency_symbol ?? '₹' }}</span><span id="stat-settled">0.00</span></span>
            </div>
        </div>
    </div>
    <div class="col-md-4 col-sm-6 col-12">
        <div class="info-box bg-warning shadow-sm">
            <span class="info-box-icon"><i class="fas fa-clock text-white"></i></span>
            <div class="info-box-content text-white">
                <span class="info-box-text">Unsettled</span>
                <span class="info-box-number"><span class="currency-symbol">{{ $settings->currency_symbol ?? '₹' }}</span><span id="stat-unsettled">0.00</span></span>
            </div>
        </div>
    </div>
    <div class="col-md-4 col-sm-6 col-12">
        <div class="info-box bg-success shadow-sm">
            <span class="info-box-icon"><i class="fas fa-file-invoice-dollar"></i></span>
            <div class="info-box-content">
                <span class="info-box-text">Pending Approval</span>
                <span class="info-box-number"><span class="currency-symbol">{{ $settings->currency_symbol ?? '₹' }}</span><span id="stat-pending">0.00</span></span>
            </div>
        </div>
    </div>
</div>

<div class="card card-outline card-primary shadow-sm">
    <div class="card-header">
        <h3 class="card-title font-weight-bold"><i class="fas fa-receipt mr-2 text-primary"></i>Expense Tracking & Filters</h3>
    </div>
    <div class="card-body">
        <div class="row">
            <div class="col-md-2">
                <div class="form-group">
                    <label class="small font-weight-bold">Start Date</label>
                    <input type="date" id="filter_start" class="form-control form-control-sm">
                </div>
            </div>
            <div class="col-md-2">
                <div class="form-group">
                    <label class="small font-weight-bold">End Date</label>
                    <input type="date" id="filter_end" class="form-control form-control-sm">
                </div>
            </div>
            @if(auth()->user()->canAccess('leaves.manage'))
            <div class="col-md-3">
                <div class="form-group">
                    <label class="small font-weight-bold">Employee</label>
                    <select id="filter_emp" class="form-control form-control-sm select2-ajax w-100">
                        <option value="">All Staff</option>
                    </select>
                </div>
            </div>
            @endif
            <div class="col-md-2">
                <div class="form-group">
                    <label class="small font-weight-bold">Status</label>
                    <select id="filter_status" class="form-control form-control-sm">
                        <option value="">All Status</option>
                        <option value="pending">Pending</option>
                        <option value="approved">Approved</option>
                        <option value="rejected">Rejected</option>
                    </select>
                </div>
            </div>
            <div class="col-md-2">
                <div class="form-group">
                    <label class="small font-weight-bold">Settlement</label>
                    <select id="filter_settled" class="form-control form-control-sm">
                        <option value="">All</option>
                        <option value="1">Settled</option>
                        <option value="0">Unsettled</option>
                    </select>
                </div>
            </div>
            <div class="col-md-1">
                <div class="form-group">
                    <label>&nbsp;</label>
                    <button id="applyFilters" class="btn btn-primary btn-sm btn-block">
                        <i class="fas fa-filter"></i>
                    </button>
                </div>
            </div>
        </div>
        
        <div class="table-responsive mt-3">
            <table class="table table-hover table-bordered table-striped w-100 mb-0" id="expensesTable">
                <thead class="bg-light">
                    <tr>
                        <th>Employee</th>
                        <th>Category</th>
                        <th>Amount</th>
                        <th>Date</th>
                        <th>Status</th>
                        <th>Settlement</th>
                        <th class="text-center">Action</th>
                    </tr>
                </thead>
            </table>
        </div>
    </div>
</div>
@endsection

@section('modals')
<div class="modal fade" id="addExpenseModal" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header bg-primary py-2 text-white">
                <h5 class="modal-title font-weight-bold">Submit Reimbursement</h5>
                <button type="button" class="close text-white" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <form id="expenseForm" enctype="multipart/form-data">
                @csrf
                <div class="modal-body p-4">
                    <div class="form-group">
                        <label class="font-weight-bold">Expense Category</label>
                        <select name="category" class="form-control" required>
                            <option value="">Select Category</option>
                            <option value="Travel">Travel</option>
                            <option value="Food">Food</option>
                            <option value="Office Supplies">Office Supplies</option>
                            <option value="Internet/Phone">Internet/Phone</option>
                            <option value="Other">Other</option>
                        </select>
                    </div>
                    <div class="row">
                        <div class="col-md-6">
                            <div class="form-group">
                                <label class="font-weight-bold">Amount ({{ \App\Models\BusinessSetting::firstOrNewDefault()->currency_symbol }})</label>
                                <input type="number" step="0.01" name="amount" class="form-control" placeholder="0.00" required>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group">
                                <label class="font-weight-bold">Date</label>
                                <input type="date" name="date" class="form-control" value="{{ date('Y-m-d') }}" required>
                            </div>
                        </div>
                    </div>
                    <div class="form-group mb-0">
                        <label class="font-weight-bold">Proof / Receipt</label>
                        <div class="custom-file">
                            <input type="file" name="proof" class="custom-file-input" id="proofFile" accept="image/*,.pdf">
                            <label class="custom-file-label" for="proofFile">Choose file</label>
                        </div>
                    </div>
                </div>
                <div class="modal-footer bg-light p-2">
                    <button type="button" class="btn btn-secondary btn-sm" data-dismiss="modal">Cancel</button>
                    <button type="submit" class="btn btn-primary btn-sm px-4">Submit Claim</button>
                </div>
            </form>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
$(function() {
    $('.select2-ajax').select2({
        theme: 'bootstrap4',
        ajax: {
            url: "{{ route('employees.search') }}",
            dataType: 'json',
            delay: 250,
            data: function (params) { return { term: params.term }; },
            processResults: function (data) { return { results: data.results }; },
            cache: true
        },
        placeholder: 'Search staff...',
        allowClear: true
    });

    var table = $('#expensesTable').DataTable({
        processing: true,
        serverSide: true,
        ajax: {
            url: "{{ route('expenses.data') }}",
            data: function(d) {
                d.start_date = $('#filter_start').val();
                d.end_date = $('#filter_end').val();
                d.employee_id = $('#filter_emp').val();
                d.status = $('#filter_status').val();
                d.is_settled = $('#filter_settled').val();
                @if(!auth()->user()->canAccess('expenses.manage')) d.mine = true; @endif
            }
        },
        columns: [
            {data: 'employee_name', name: 'employee.name', render: function(data){ return '<strong>'+data+'</strong>'; }},
            {data: 'category', name: 'category'},
            {data: 'amount', name: 'amount', className: 'font-weight-bold'},
            {data: 'date', name: 'date'},
            {data: 'status', name: 'status'},
            {data: 'is_settled', name: 'is_settled'},
            {data: 'action', name: 'action', orderable: false, searchable: false, className: 'text-center'}
        ],
        order: [[3, 'desc']],
        drawCallback: function() {
            updateStats();
            $('.dataTables_paginate > .pagination').addClass('pagination-sm');
        }
    });

    function updateStats() {
        $.get("{{ route('expenses.stats') }}", {
            start_date: $('#filter_start').val(),
            end_date: $('#filter_end').val(),
            employee_id: $('#filter_emp').val()
        }, function(res) {
            $('#stat-settled').text(res.settled);
            $('#stat-unsettled').text(res.unsettled);
            $('#stat-pending').text(res.pending);
            $('.currency-symbol').text(res.currency);
        });
    }

    $('#applyFilters').click(function() { table.draw(); });

    $('#expenseForm').on('submit', function(e) {
        e.preventDefault();
        var formData = new FormData(this);
        $.ajax({
            url: "{{ route('expenses.store') }}",
            type: 'POST',
            data: formData,
            processData: false,
            contentType: false,
            success: function(res) {
                $('#addExpenseModal').modal('hide');
                $('#expenseForm')[0].reset();
                Swal.fire({ icon: 'success', title: 'Submitted!', text: res.success, timer: 1500, showConfirmButton: false });
                table.draw();
            },
            error: function(xhr) {
                var err = xhr.responseJSON.errors;
                var msg = '';
                $.each(err, function(k, v) { msg += v[0] + '\n'; });
                Swal.fire({ icon: 'error', title: 'Error', text: msg });
            }
        });
    });

    $('body').on('click', '.approve-expense', function() {
        var id = $(this).data('id');
        Swal.fire({ title: 'Approve Expense?', text: "Mark for settlement.", icon: 'question', showCancelButton: true, confirmButtonColor: '#28a745', confirmButtonText: 'Yes, Approve' }).then((result) => {
            if (result.isConfirmed) { $.post("{{ url('expenses') }}/" + id + "/approve", { _token: "{{ csrf_token() }}" }, function(res) { table.draw(); }); }
        });
    });

    $('body').on('click', '.reject-expense', function() {
        var id = $(this).data('id');
        Swal.fire({ title: 'Reject Expense?', input: 'text', inputPlaceholder: 'Reason', showCancelButton: true, confirmButtonColor: '#dc3545', confirmButtonText: 'Reject' }).then((result) => {
            if (result.isConfirmed) { $.post("{{ url('expenses') }}/" + id + "/reject", { _token: "{{ csrf_token() }}", reason: result.value }, function(res) { table.draw(); }); }
        });
    });

    $('body').on('click', '.settle-expense', function() {
        var id = $(this).data('id');
        Swal.fire({ title: 'Mark as Settled?', text: "Confirm payment made.", icon: 'info', showCancelButton: true, confirmButtonColor: '#17a2b8', confirmButtonText: 'Yes, Settled' }).then((result) => {
            if (result.isConfirmed) { $.post("{{ url('expenses') }}/" + id + "/settle", { _token: "{{ csrf_token() }}" }, function(res) { table.draw(); }); }
        });
    });
});
</script>
@endpush