@extends('adminlte::page')

@section('title', 'Günlük Giderler')

@section('css')
    <link href="https://cdn.datatables.net/1.13.6/css/dataTables.bootstrap5.min.css" rel="stylesheet">
    <link rel="stylesheet" href="{{ asset('build/assets/datatable-B_fUXaNs.css') }}">
    <style>
        .select2-container .select2-selection--single {
            height: calc(2.25rem + 2px) !important;
        }
        .select2-container .select2-selection__rendered {
            line-height: calc(2.25rem + 2px) !important;
        }
    </style>
@endsection

@section('content')
<div class="container-fluid pt-4">

    {{-- Başlık --}}
    <div class="d-flex justify-content-between align-items-center mb-4">
        <h2 class="fw-bold">Günlük Giderler</h2>
        <div class="d-flex gap-2">
            {{-- Filtre Butonu --}}
            <button type="button" id="filterButton" class="btn btn-info shadow-sm"
                    data-bs-toggle="modal" data-bs-target="#filterModal">
                <i class="fas fa-filter me-1"></i> Filtrele
            </button>
            {{-- Yeni Gider --}}
            <button type="button" class="btn btn-success shadow-sm"
                    data-bs-toggle="modal" data-bs-target="#expenseModal">
                <i class="fas fa-plus me-2"></i> Yeni Günlük Gider Ekle
            </button>
        </div>
    </div>

    {{-- Flash Mesajlar --}}
    @if(session('success'))
        <div class="alert alert-success alert-dismissible fade show">
            {{ session('success') }}
        </div>
    @endif
    @if(session('error'))
        <div class="alert alert-danger alert-dismissible fade show">
            {{ session('error') }}
        </div>
    @endif

    {{-- DataTable --}}
    <div class="card shadow-sm">
        <div class="card-body table-responsive p-0">
            <table class="table table-striped table-hover mb-0 datatable">
                <thead class="table-success">
                    <tr>
                        <th>Başlık</th>
                        <th>Tutar</th>
                        <th>Tip</th>
                        <th>Şube</th>
                        <th>Tarih</th>
                        <th>Açıklama</th>
                        <th>İşlemler</th>
                    </tr>
                </thead>
                <tbody></tbody>
            </table>
        </div>
    </div>

</div>

{{-- Modaller --}}
@include('staff.finance.expenses_daily.create')
@include('staff.finance.expenses_daily.filter')
@include('staff.finance.expenses_daily.edit')

{{-- Ortak Show Modal --}}
<div class="modal fade" id="detailModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header bg-info text-white">
                <h5 class="modal-title">
                    <i class="fas fa-money-bill-wave me-2"></i> Gider Detayları
                </h5>
                <button type="button" class="btn btn-light" data-bs-dismiss="modal" aria-label="Kapat">
                    <i class="fas fa-times"></i>
                </button>
            </div>
            <div class="modal-body" id="detailModalBody">
                {{-- modal.js bu alanı yönetir --}}
                @include('staff.finance.expenses_daily.show')
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Kapat</button>
            </div>
        </div>
    </div>
</div>

@endsection

@section('js')
    {{-- ① Sayfa değişkenleri — JS dosyaları bunları okur --}}
    <script>
        const AJAX_DETAIL_ROUTE     = '{{ route('expense_daily.show_data', ['expense' => 'PLACEHOLDER']) }}';
        const AJAX_UPDATE_ROUTE_TPL = '{{ route('expense_daily.update', ['expense_daily' => 'PLACEHOLDER']) }}';

        // filter.js için
        const FILTER_KEY    = 'expense_daily_filters';
        const FILTER_FIELDS = ['start_date', 'end_date', 'branch_id', 'expense_type_id', 'is_processed'];
    </script>

    {{-- ② Kütüphaneler --}}
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://cdn.datatables.net/1.13.6/js/jquery.dataTables.min.js"></script>
    <script src="https://cdn.datatables.net/1.13.6/js/dataTables.bootstrap5.min.js"></script>

    {{-- ③ Ortak JS dosyaları --}}
    <script src="{{ asset('build/assets/datatable_config-ChXcoJCI.js') }}"></script>
    <script src="{{ asset('build/assets/modal-B9qft8NS.js') }}"></script>
    <script src="{{ asset('js/filter.js') }}"></script>

    {{-- ④ DataTable başlat --}}
    <script>
        $(document).ready(function () {
            const config = {
                ajaxUrl: "{{ route('expense_daily.get_data') }}",

                defaultOrders: {
                    'default':  [[4, 'desc']],
                    'filtered': [[4, 'asc']],
                },

                filterModalId:  '#filterModal',
                filterButtonId: '#filterButton',

                // filter.js'nin filtreleri AJAX isteğine eklemesi için
                ajaxData: function (d) {
                    FilterManager.appendToRequest(d);
                },

                columns: [
                    { data: 'title',       name: 'title' },
                    { data: 'amount',      name: 'amount' },
                    { data: 'type.name',   name: 'type.name',   searchable: false, orderable: false },
                    { data: 'branch_info', name: 'branch.name', searchable: true },
                    { data: 'expense_date',name: 'created_at' },
                    { data: 'description', name: 'description', searchable: true, orderable: false },
                    { data: 'actions',     name: 'actions',     searchable: false, orderable: false }
                ],
            };

            const table = initializeServerSideDatatable(config);

            // filter.js'yi DataTable instance ile başlat
            FilterManager.init(table);
        });
    </script>
@endsection