@extends('layouts.main')

@section('title', 'Monthly Profits')

@section('content')

<link rel="stylesheet" href="https://cdn.datatables.net/1.13.6/css/jquery.dataTables.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/1.13.6/css/dataTables.bootstrap5.min.css">

<div class="main-content app-content">
    <div class="container-fluid">

        <div class="d-md-flex d-block align-items-center justify-content-between page-header-breadcrumb mb-4">
            <div>
                <h1 class="page-title mb-0 text-primary">Monthly Profits</h1>
            </div>
            @php
                $queryParams = [];
                if(request('branch_id')) {
                    $queryParams['branch_id'] = request('branch_id');
                }
            @endphp
            
            <div class="d-flex gap-2 flex-wrap">
                <a href="{{ route('monthly-profits.create', $queryParams) }}" class="btn btn-primary">
                    <i class="fas fa-plus me-2"></i>Add Profit
                </a>
                
                <!-- Import/Export Dropdown -->
                <div class="dropdown">
                    <button class="btn btn-success dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
                        <i class="fas fa-file-import"></i> Import / Export
                    </button>
                    <ul class="dropdown-menu dropdown-menu-end">
                        <li>
                            <button type="button" class="dropdown-item" data-bs-toggle="modal" data-bs-target="#importModal">
                                <i class="fas fa-file-import"></i> Import
                            </button>
                        </li>
                        <li>
                            <a href="{{ route('monthly-profits.export') }}" class="dropdown-item">
                                <i class="fas fa-file-export"></i> Export
                            </a>
                        </li>
                        <li>
                            <a href="{{ route('monthly-profits.download-sample') }}" class="dropdown-item">
                                <i class="fas fa-download"></i> Sample CSV
                            </a>
                        </li>
                    </ul>
                </div>
                
                @if(request('branch_id'))
                    <a href="{{ route('branch.dashboard', request('branch_id')) }}" class="btn btn-outline-secondary ms-2">
                        <i class="fas fa-arrow-left me-2"></i>Back to Branch
                    </a>
                @endif
            </div>
        </div>
        
        <div class="modal fade" id="importModal" tabindex="-1" aria-labelledby="importModalLabel" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="importModalLabel">
                            <i class="fas fa-file-import"></i> Import Monthly Profits
                        </h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <form action="{{ route('monthly-profits.import') }}" method="POST" id="importForm" enctype="multipart/form-data">
                        @csrf
                        <div class="modal-body">
                            <div class="mb-3">
                                <label for="csv_file" class="form-label fw-bold">Choose CSV File</label>
                                <input type="file" class="form-control @error('csv_file') is-invalid @enderror" 
                                       id="csv_file" name="csv_file" accept=".csv,.txt" required>
                                <small class="text-muted">
                                    <i class="fas fa-info-circle"></i> Supported format: CSV only (Max 2MB)
                                </small>
                                @error('csv_file')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                            <div class="alert alert-info">
                                <i class="fas fa-info-circle"></i> 
                                <strong>Required columns <span class="required-star">*</span>:</strong>
                                <ul class="mb-0 mt-1">
                                    <li><strong>branch_name</strong> <span class="required-star">*</span> - Must match existing branch name</li>
                                    <li><strong>financial_month</strong> <span class="required-star">*</span> - Month (Y-m format, e.g., 2024-01)</li>
                                    <li><strong>net_profit_amount</strong> <span class="required-star">*</span> - Profit amount (numeric)</li>
                                </ul>
                                <hr class="my-2">
                                <strong>Optional columns:</strong>
                                <ul class="mb-0 mt-1">
                                    <li><strong>is_locked</strong> - 1 for locked, 0 for open (Default: 0)</li>
                                    <li><strong>notes</strong> - Additional notes</li>
                                </ul>
                            </div>
                            <div class="alert alert-warning">
                                <i class="fas fa-exclamation-triangle"></i>
                                <strong>Note:</strong> 
                                <ul class="mb-0 mt-1">
                                    <li>Branch name must exactly match existing branch</li>
                                    <li>Financial month must be in Y-m format (e.g., 2024-01)</li>
                                    <li>Locked records cannot be edited or deleted</li>
                                </ul>
                            </div>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                            <button type="submit" class="btn btn-success" id="importBtn">
                                <i class="fas fa-upload"></i> Import
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>

        <div class="card mt-3">
            <div class="card-body">
                <!-- DataTable will be rendered here -->
                <table class="table table-bordered" id="profitsTable">
                    <thead>
                        <tr>
                            <th>ID</th>
                            <th>Branch</th>
                            <th>Month</th>
                            <th>Gross Profit</th>
                            <th>Locked</th>
                            <th>Actions</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach($profits as $key => $profit)
                        <tr>
                            <td>{{ $key+1 }}</td>
                            <td>{{ $profit->branch->branch_name ?? '' }}</td>
                            <td>{{ $profit->financial_month }}</td>
                            <td>KWD {{ number_format($profit->net_profit_amount, 2) }}</td>
                            <td>
                                @if($profit->is_locked)
                                    <span class="badge bg-danger">Locked</span>
                                @else
                                    <span class="badge bg-success">Open</span>
                                @endif
                            </td>
                            <td>
                                <a href="{{ route('monthly-profits.edit',$profit->id) }}" class="btn btn-warning btn-sm">Edit</a>
                                <form method="POST" action="{{ route('monthly-profits.destroy',$profit->id) }}" class="d-inline delete-form" id="delete-form-{{ $profit->id }}">
                                    @csrf @method('DELETE')
                                    <button type="button" class="btn btn-danger btn-sm btn-delete" data-id="{{ $profit->id }}" data-name="{{ $profit->branch->branch_name ?? '' }} - {{ $profit->financial_month }}">Delete</button>
                                </form>
                            </td>
                        </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>


<!-- DataTable JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.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>

<script src="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>

<script>
    toastr.options = {
        closeButton: true,
        progressBar: true,
        positionClass: "toast-top-right",
        timeOut: "4000"
    }

    @if(session('success'))
        Swal.fire({
            icon: 'success',
            title: 'Success!',
            text: "{{ session('success') }}",
            timer: 3000
        });
    @endif

    @if(session('error'))
        Swal.fire({
            icon: 'error',
            title: 'Error!',
            text: "{{ session('error') }}"
        });
    @endif

    @if (session('validation_errors'))
        @foreach (session('validation_errors') as $error)
            toastr.error("{{ $error }}");
        @endforeach
    @endif

    // ============================================
    // DATATABLE INITIALIZATION
    // ============================================
    $(document).ready(function() {
        // Initialize DataTable
        var table = $('#profitsTable').DataTable({
    "pageLength": 10,
    "lengthMenu": [[10, 25, 50, 100, -1], [10, 25, 50, 100, "All"]],
    "pagingType": "simple_numbers",   // 👈 ye line add karein
    "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": {
            "next": "›",
            "previous": "‹"
        }
    },
    "columnDefs": [
        { "orderable": false, "targets": 5 }
    ],
    "order": [[2, 'desc']],
});

        // ============================================
        // IMPORT FORM - SHOW LOADER ON SUBMIT
        // ============================================
        $('#importForm').on('submit', function(e) {
            var $btn = $('#importBtn');
            var fileInput = $('#csv_file');
            
            // Check if file is selected
            if (!fileInput.val()) {
                e.preventDefault();
                toastr.error('Please select a CSV file to import.');
                return false;
            }
            
            // Show loading state on button
            $btn.prop('disabled', true);
            $btn.html(`
                <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
                Importing...
            `);
            
            // Show loading toast
            toastr.info('Importing data... Please wait.', 'Processing');
            
            // The form will submit normally
            return true;
        });

        // ============================================
        // DELETE CONFIRMATION WITH SWEETALERT
        // ============================================
        $(document).on('click', '.btn-delete', function(e) {
            e.preventDefault();
            
            const profitId = $(this).data('id');
            const profitName = $(this).data('name');
            const form = $('#delete-form-' + profitId);

            Swal.fire({
                title: 'Are you sure?',
                html: `You are about to delete profit record for: <strong>${profitName}</strong><br>This action cannot be undone!`,
                icon: 'warning',
                showCancelButton: true,
                confirmButtonColor: '#d33',
                cancelButtonColor: '#3085d6',
                confirmButtonText: 'Yes, delete it!',
                cancelButtonText: 'Cancel'
            }).then((result) => {
                if (result.isConfirmed) {
                    Swal.fire({
                        title: 'Deleting...',
                        text: 'Please wait',
                        allowOutsideClick: false,
                        allowEscapeKey: false,
                        showConfirmButton: false,
                        didOpen: () => {
                            Swal.showLoading();
                        }
                    });
                    form.submit();
                }
            });
        });

        // Prevent form resubmission on page refresh
        if (window.history.replaceState) {
            window.history.replaceState(null, null, window.location.href);
        }
    });
</script>

<style>
.dataTables_wrapper .dataTables_length select {
    border-radius: 6px;
    padding: 4px 24px 4px 8px;
    height: 34px;
    width: auto;
    min-width: 60px;
    box-sizing: border-box;
    border: 1px solid #d1d5db;
    -webkit-appearance: none;
    appearance: none;
}

div.dataTables_wrapper div.dataTables_paginate ul.pagination {
    
    gap: 12px;
    }

.dataTables_wrapper .dataTables_paginate {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 15px;
}

.dataTables_wrapper .dataTables_paginate .paginate_button {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50% !important;
    border: none !important;
    background: #f1f2f6 !important;
    color: #6b7280 !important;
    margin: 0 !important;
    padding: 0 !important;
    font-weight: 500;
    box-shadow: none !important;
    transition: all 0.15s ease-in-out;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
    background: #6366f1 !important;
    color: #fff !important;
    border: none !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
    background: #e5e7eb !important;
    color: #374151 !important;
    border: none !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.disabled,
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover {
    opacity: 0.4;
    background: #f9fafb !important;
    color: #9ca3af !important;
    cursor: default;
}

.dataTables_wrapper .dataTables_length select {
    border-radius: 6px;
    padding: 4px 8px;
}
</style>

@endsection