@extends('layouts.app')

@section('content')
<div class="container-fluid">
    <div class="d-flex justify-content-between align-items-center mb-3">
        <h4 class="mb-0">Sales Payment Schedules</h4>
        <div>
            <a href="{{ route('reseller.sales-payment-schedules.expired') }}" class="btn btn-warning mr-2">
                <i class="fas fa-exclamation-triangle mr-2"></i>Expire Commitment
            </a>
            <a href="{{ route('reseller.sales-payment-schedules.monthly') }}" class="btn btn-info mr-2">
                <i class="fas fa-calendar-alt mr-2"></i>Monthly Schedule
            </a>
            <a href="{{ route('reseller.sales-payment-schedules.create') }}" class="btn btn-primary">
                <i class="fas fa-plus mr-2"></i>Create Schedule
            </a>
        </div>
    </div>

    @if(session('success'))
        <div class="alert alert-success">{{ session('success') }}</div>
    @endif

    <!-- Summary Cards -->
    <div class="row mb-4">
        <div class="col-md-4">
            <div class="card border-warning">
                <div class="card-body">
                    <div class="d-flex justify-content-between align-items-center">
                        <div>
                            <h6 class="text-muted mb-1">Today Expected Amount</h6>
                            <h4 class="mb-0 text-warning">BDT {{ number_format($todayExpectedAmount, 2) }}</h4>
                            <small class="text-muted">{{ now()->format('M d, Y') }}</small>
                        </div>
                        <div>
                            <i class="fas fa-calendar-day fa-2x text-warning"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-4">
            <div class="card border-info">
                <div class="card-body">
                    <div class="d-flex justify-content-between align-items-center">
                        <div>
                            <h6 class="text-muted mb-1">7 Days Expected Amount</h6>
                            <h4 class="mb-0 text-info">BDT {{ number_format($sevenDaysExpectedAmount, 2) }}</h4>
                            <small class="text-muted">{{ now()->format('M d') }} - {{ now()->addDays(7)->format('M d, Y') }}</small>
                        </div>
                        <div>
                            <i class="fas fa-calendar-week fa-2x text-info"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-4">
            <div class="card border-primary">
                <div class="card-body">
                    <div class="d-flex justify-content-between align-items-center">
                        <div>
                            <h6 class="text-muted mb-1">Monthly Expected Amount</h6>
                            <h4 class="mb-0 text-primary">BDT {{ number_format($monthlyExpectedAmount, 2) }}</h4>
                            <small class="text-muted">{{ now()->format('M Y') }}</small>
                        </div>
                        <div>
                            <i class="fas fa-calendar-alt fa-2x text-primary"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <form method="get" class="card mb-3 p-3">
        <div class="form-row align-items-end">
            <div class="col-md-3 mb-2">
                <label class="small mb-1">Company Name</label>
                <select name="user_id" class="form-control">
                    <option value="">All</option>
                    @foreach($users as $user)
                        <option value="{{ $user->id }}" {{ request('user_id') == $user->id ? 'selected' : '' }}>
                            {{ $user->company_name ? $user->company_name . ' (' . $user->name . ')' : $user->name }}
                        </option>
                    @endforeach
                </select>
            </div>
            <div class="col-md-3 mb-2">
                <label class="small mb-1">From Date</label>
                <input type="date" 
                       name="date_from" 
                       class="form-control" 
                       value="{{ request('date_from') }}">
            </div>
            <div class="col-md-3 mb-2">
                <label class="small mb-1">To Date</label>
                <input type="date" 
                       name="date_to" 
                       class="form-control" 
                       value="{{ request('date_to') }}">
            </div>
            <div class="col-md-3 mb-2">
                <button class="btn btn-primary btn-sm mr-2" type="submit">
                    <i class="fas fa-filter"></i> Filter
                </button>
                <a class="btn btn-secondary btn-sm" href="{{ route('reseller.sales-payment-schedules.index') }}">
                    <i class="fas fa-undo"></i> Reset
                </a>
            </div>
        </div>
    </form>

    <!-- Today's Payment Schedules Table -->
    @if($todaySchedules->count() > 0)
        <div class="card mb-4">
            <div class="card-header bg-warning text-dark">
                <h5 class="mb-0">
                    <i class="fas fa-calendar-day mr-2"></i>
                    Today's Payment Schedules ({{ now()->format('Y-m-d') }})
                </h5>
            </div>
            <div class="table-responsive">
                <table class="table table-bordered mb-0">
                    <thead class="thead-light">
                        <tr>
                            <th>#</th>
                            <th>Invoice</th>
                            <th>Company Name</th>
                            <th>Mobile Number</th>
                            <th>Expected Payment Date</th>
                            <th>Expected Amount</th>
                            <th>Payment Amount</th>
                            <th>Remarks</th>
                            <th>Reasons</th>
                            <th class="text-right">Actions</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach($todaySchedules as $index => $schedule)
                            <tr>
                                <td>{{ $index + 1 }}</td>
                                <td>{{ optional($schedule->salesInvoice)->invoice_no ?? 'N/A' }}</td>
                                <td>
                                    @php
                                        $user = $schedule->user;
                                        $displayName = $user && $user->company_name ? $user->company_name : ($user ? $user->name : 'N/A');
                                    @endphp
                                    {{ $displayName }}
                                </td>
                                <td>
                                    @php
                                        $user = $schedule->user;
                                        $mobileNumber = $user && $user->phone ? $user->phone : 'N/A';
                                    @endphp
                                    {{ $mobileNumber }}
                                </td>
                                <td>{{ optional($schedule->expected_payment_date)->format('Y-m-d') }}</td>
                                <td>BDT {{ number_format($schedule->expected_payment_amount, 2) }}</td>
                                <td>BDT {{ number_format($schedule->transaction_payment_amount ?? 0, 2) }}</td>
                                <td>{{ $schedule->remarks ?? '—' }}</td>
                                <td>
                                    @if($schedule->scheduleBreakReason)
                                        <span class="badge badge-info">
                                            <i class="fas fa-info-circle mr-1"></i>{{ $schedule->scheduleBreakReason->reason }}
                                        </span>
                                        @if($schedule->scheduleBreakReason->description)
                                            <br><small class="text-muted">{{ Str::limit($schedule->scheduleBreakReason->description, 50) }}</small>
                                        @endif
                                    @else
                                        <span class="text-muted">—</span>
                                    @endif
                                </td>
                                <td class="text-right">
                                    <a href="{{ route('reseller.sales-payment-schedules.show', $schedule) }}" class="btn btn-sm btn-outline-info" title="View">
                                        <i class="fas fa-eye"></i> View
                                    </a>
                                    <a href="{{ route('reseller.sales-payment-schedules.edit', $schedule) }}" class="btn btn-sm btn-outline-primary">
                                        Edit
                                    </a>
                                    <form action="{{ route('reseller.sales-payment-schedules.destroy', $schedule) }}" method="post" class="d-inline" onsubmit="return confirm('Delete this schedule?');">
                                        @csrf
                                        @method('DELETE')
                                        <button type="submit" class="btn btn-sm btn-outline-danger">Delete</button>
                                    </form>
                                </td>
                            </tr>
                        @endforeach
                    </tbody>
                    @if($todaySchedules->count() > 0)
                    <tfoot class="table-info">
                        <tr>
                            <th colspan="5" class="text-right"><strong>Total Summary:</strong></th>
                            <th class="text-right"><strong>BDT {{ number_format($todayTotalExpectedAmount, 2) }}</strong></th>
                            <th class="text-right"><strong>BDT {{ number_format($todayTotalPaymentAmount, 2) }}</strong></th>
                            <th colspan="3"></th>
                        </tr>
                        <tr>
                            <th colspan="5" class="text-right"><small class="text-muted">Total Schedules:</small></th>
                            <th colspan="5" class="text-left"><small class="text-muted"><strong>{{ $todayTotalCount }}</strong> schedule(s)</small></th>
                        </tr>
                    </tfoot>
                    @endif
                </table>
            </div>
        </div>
    @endif

    <!-- Other Payment Schedules Table -->
    <div class="card">
        <div class="card-header">
            <h5 class="mb-0">
                <i class="fas fa-calendar-alt mr-2"></i>
                All Other Payment Schedules
            </h5>
        </div>
        <div>
            <table id="otherSchedulesTable" class="table table-bordered mb-0">
                <thead class="thead-light">
                    <tr>
                        <th>#</th>
                        <th>Company Name</th>
                        <th>Mobile Number</th>
                        <th>Expected Payment Date</th>
                        <th>Expected Amount</th>
                        <th>Payment Amount</th>
                        <th>Remarks</th>
                        <th>Reasons</th>
                        <th class="text-right">Actions</th>
                    </tr>
                </thead>
                <tbody>
                    @php
                        $schedulesToDisplay = isset($otherSchedules) && $otherSchedules->count() > 0 ? $otherSchedules : $otherSchedulesPaginated;
                    @endphp
                    @forelse($schedulesToDisplay as $schedule)
                        <tr>
                            <td>{{ $loop->index + 1 }}</td>
                            <td>
                                @php
                                    $user = $schedule->user;
                                    $displayName = $user && $user->company_name ? $user->company_name : ($user ? $user->name : 'N/A');
                                @endphp
                                {{ $displayName }}
                            </td>
                            <td>
                                @php
                                    $user = $schedule->user;
                                    $mobileNumber = $user && $user->phone ? $user->phone : 'N/A';
                                @endphp
                                {{ $mobileNumber }}
                            </td>
                            <td>{{ optional($schedule->expected_payment_date)->format('Y-m-d') }}</td>
                            <td>BDT {{ number_format($schedule->expected_payment_amount, 2) }}</td>
                            <td>BDT {{ number_format($schedule->transaction_payment_amount ?? 0, 2) }}</td>
                            <td>{{ $schedule->remarks ?? '—' }}</td>
                            <td>
                                @if($schedule->scheduleBreakReason)
                                    <span class="badge badge-info">
                                        <i class="fas fa-info-circle mr-1"></i>{{ $schedule->scheduleBreakReason->reason }}
                                    </span>
                                    @if($schedule->scheduleBreakReason->description)
                                        <br><small class="text-muted">{{ Str::limit($schedule->scheduleBreakReason->description, 50) }}</small>
                                    @endif
                                @else
                                    <span class="text-muted">—</span>
                                @endif
                            </td>
                            <td class="text-right">
                                <a href="{{ route('reseller.sales-payment-schedules.show', $schedule) }}" class="btn btn-sm btn-outline-info" title="View">
                                    <i class="fas fa-eye"></i> View
                                </a>
                                <a href="{{ route('reseller.sales-payment-schedules.edit', $schedule) }}" class="btn btn-sm btn-outline-primary">
                                    Edit
                                </a>
                                <form action="{{ route('reseller.sales-payment-schedules.destroy', $schedule) }}" method="post" class="d-inline" onsubmit="return confirm('Delete this schedule?');">
                                    @csrf
                                    @method('DELETE')
                                    <button type="submit" class="btn btn-sm btn-outline-danger">Delete</button>
                                </form>
                            </td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="9" class="text-center text-muted py-4">No payment schedules found.</td>
                        </tr>
                    @endforelse
                </tbody>
                @php
                    $schedulesCount = isset($otherSchedules) ? $otherSchedules->count() : $otherSchedulesPaginated->count();
                @endphp
                @if($schedulesCount > 0)
                <tfoot class="table-info">
                    <tr>
                        <th colspan="4" class="text-right"><strong>Total Summary:</strong></th>
                        <th class="text-right"><strong>BDT {{ number_format($otherTotalExpectedAmount, 2) }}</strong></th>
                        <th class="text-right"><strong>BDT {{ number_format($otherTotalPaymentAmount, 2) }}</strong></th>
                        <th colspan="3"></th>
                    </tr>
                    <tr>
                        <th colspan="4" class="text-right"><small class="text-muted">Total Schedules:</small></th>
                        <th colspan="5" class="text-left"><small class="text-muted"><strong>{{ $otherTotalCount }}</strong> schedule(s)</small></th>
                    </tr>
                </tfoot>
                @endif
            </table>
        </div>
    </div>
</div>
@endsection

@section('styles')
<!-- DataTables CSS -->
<link rel="stylesheet" href="https://cdn.datatables.net/1.13.7/css/dataTables.bootstrap4.min.css">
<style>
    /* DataTables Length Menu Alignment */
    #otherSchedulesTable_wrapper .dataTables_length {
        display: flex;
        align-items: center;
        margin-bottom: 1rem;
        padding: 0.75rem 15px 0 15px;
    }
    
    #otherSchedulesTable_wrapper .dataTables_length label {
        display: flex;
        align-items: center;
        margin-bottom: 0;
        font-weight: normal;
        white-space: nowrap;
        padding: 0;
        line-height: 1.5;
        margin-right: 0;
    }
    
    #otherSchedulesTable_wrapper .dataTables_length label::after {
        content: "";
        margin: 0;
    }
    
    #otherSchedulesTable_wrapper .dataTables_length select {
        margin: 0 8px;
        padding: 0.375rem 1.75rem 0.375rem 0.75rem;
        border: 1px solid #ced4da;
        border-radius: 0.25rem;
        height: calc(1.5em + 0.75rem + 2px);
        vertical-align: middle;
        display: inline-block;
        line-height: 1.5;
        font-size: 1rem;
        background-color: #fff;
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
        background-repeat: no-repeat;
        background-position: right 0.75rem center;
        background-size: 16px 12px;
        appearance: none;
        -webkit-appearance: none;
        -moz-appearance: none;
    }
    
    #otherSchedulesTable_wrapper .dataTables_length select:focus {
        border-color: #80bdff;
        outline: 0;
        box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
    }
    
    /* DataTables Filter Alignment */
    #otherSchedulesTable_wrapper .dataTables_filter {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        margin-bottom: 1rem;
        padding: 0.75rem 15px 0 15px;
    }
    
    #otherSchedulesTable_wrapper .dataTables_filter label {
        display: flex;
        align-items: center;
        margin-bottom: 0;
        font-weight: normal;
        padding: 0;
    }
    
    #otherSchedulesTable_wrapper .dataTables_filter input {
        margin-left: 8px;
        padding: 0.375rem 0.75rem;
        border: 1px solid #ced4da;
        border-radius: 0.25rem;
        height: calc(1.5em + 0.75rem + 2px);
    }
    
    /* Ensure proper padding for all DataTables wrapper rows */
    #otherSchedulesTable_wrapper > .row:first-child {
        margin-left: 0;
        margin-right: 0;
    }
    
    #otherSchedulesTable_wrapper > .row:first-child > [class*="col-"]:first-child {
        padding-left: 15px;
    }
    
    #otherSchedulesTable_wrapper > .row:first-child > [class*="col-"]:last-child {
        padding-right: 15px;
    }
    
    #otherSchedulesTable_wrapper > .row:last-child {
        margin-left: 0;
        margin-right: 0;
    }
    
    #otherSchedulesTable_wrapper > .row:last-child > [class*="col-"]:first-child {
        padding-left: 15px;
    }
    
    #otherSchedulesTable_wrapper > .row:last-child > [class*="col-"]:last-child {
        padding-right: 15px;
    }
    
    /* DataTables Info Alignment */
    #otherSchedulesTable_wrapper .dataTables_info {
        padding: 0.75rem 15px;
        display: flex;
        align-items: center;
    }
    
    /* DataTables Pagination Alignment */
    #otherSchedulesTable_wrapper .dataTables_paginate {
        padding: 0.75rem 15px;
        display: flex;
        align-items: center;
        justify-content: flex-end;
    }
    
    /* Ensure proper spacing in DataTables wrapper rows */
    #otherSchedulesTable_wrapper .row {
        margin-left: -15px;
        margin-right: -15px;
    }
    
    #otherSchedulesTable_wrapper .row > [class*="col-"] {
        padding-left: 15px;
        padding-right: 15px;
    }
    
    /* Remove horizontal scrolling */
    #otherSchedulesTable_wrapper {
        overflow-x: visible !important;
    }
    
    #otherSchedulesTable_wrapper .dataTables_scroll {
        overflow-x: visible !important;
    }
    
    .dataTables_wrapper {
        overflow-x: visible !important;
    }
    
    /* Ensure table fits container */
    #otherSchedulesTable {
        width: 100% !important;
        table-layout: auto;
    }
</style>
@endsection

@section('scripts')
<!-- DataTables JS -->
<script src="https://cdn.datatables.net/1.13.7/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.13.7/js/dataTables.bootstrap4.min.js"></script>

<script>
(function() {
    function initDataTable() {
        if (typeof jQuery === 'undefined') {
            console.error('jQuery is not loaded');
            return;
        }
        
        if (typeof $.fn.DataTable === 'undefined') {
            console.error('DataTables is not loaded');
            return;
        }
        
        var table = $('#otherSchedulesTable');
        if (table.length === 0) {
            console.error('Table #otherSchedulesTable not found');
            return;
        }
        
        // Check if DataTable is already initialized
        if ($.fn.DataTable.isDataTable('#otherSchedulesTable')) {
            $('#otherSchedulesTable').DataTable().destroy();
        }
        
        table.DataTable({
            "pageLength": 25,
            "lengthMenu": [[10, 25, 50, 100, 250, 500, -1], [10, 25, 50, 100, 250, 500, "All"]],
            "order": [[3, "desc"]], // Sort by Expected Payment Date descending (column index changed after removing Invoice)
            "language": {
                "search": "Search:",
                "lengthMenu": "Show _MENU_ entries",
                "info": "Showing _START_ to _END_ of _TOTAL_ entries",
                "infoEmpty": "Showing 0 to 0 of 0 entries",
                "infoFiltered": "(filtered from _MAX_ total entries)",
                "paginate": {
                    "first": "First",
                    "last": "Last",
                    "next": "Next",
                    "previous": "Previous"
                }
            },
            "dom": "<'row'<'col-sm-12 col-md-6'l><'col-sm-12 col-md-6'f>>" +
                   "<'row'<'col-sm-12'tr>>" +
                   "<'row'<'col-sm-12 col-md-5'i><'col-sm-12 col-md-7'p>>",
            "responsive": true,
            "autoWidth": false
        });
    }
    
    // Try to initialize when document is ready
    if (document.readyState === 'loading') {
        document.addEventListener('DOMContentLoaded', function() {
            setTimeout(initDataTable, 100);
        });
    } else {
        setTimeout(initDataTable, 100);
    }
    
    // Also try with jQuery ready
    if (typeof jQuery !== 'undefined') {
        jQuery(document).ready(function() {
            setTimeout(initDataTable, 100);
        });
    }
})();
</script>
@endsection