@extends('layouts.structure')

@section('content')
    <!-- DataTables CSS -->
    <link href="https://cdn.datatables.net/1.13.6/css/dataTables.bootstrap5.min.css" rel="stylesheet">

    <style>
        .container {
            margin-top: 2rem;
            margin-bottom: 2rem;
        }

        .table th {
            background-color: #f8f9fa;
            color: #212529;
            font-weight: bold;
            text-transform: uppercase;
            font-size: 0.9rem;
        }

        .table td {
            vertical-align: middle;
        }

        .action-buttons {
            display: flex;
            gap: 5px;
        }

        .alert {
            margin-bottom: 1.5rem;
        }

        .create-inward-btn {
            margin-bottom: 1.5rem;
            background-color: rgb(54, 72, 212);
            color: white;
        }

        .create-inward-btn:hover {
            background-color: rgb(54, 72, 212);
            color: white;
            opacity: 0.9;
        }

        .btn:hover {
            opacity: 0.9;
        }

        .card-title {
            text-align: center;
            font-weight: bold;
            font-size: 1.3rem;
            margin-bottom: 1.5rem;
        }

        .dataTables_filter input {
            margin-bottom: 0.5rem;
        }
    </style>

    <div class="container">
        <h2 class="text-center mb-4">Inward List</h2>

        <!-- Success Alert -->
        @if (session('success'))
            <div class="alert alert-success alert-dismissible fade show" role="alert">
                {{ session('success') }}
                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
            </div>
        @endif

        <!-- Create Button -->
        <a href="{{ route('inward.create') }}" class="btn create-inward-btn">+ Create New Inward</a>

        <div class="card">
            <div class="card-body">
                @if ($inwards->isEmpty())
                    <div class="alert alert-info" role="alert">
                        No inwards available. Click "Create New Inward" to add one.
                    </div>
                @else
                    <div class="table-responsive">
                        <table id="inwardsTable" class="table table-bordered table-hover">
                            <thead>
                                <tr>
                                    <th>Sr No.</th>
                                    <th>Inward Code</th>
                                    <th>CRR No</th>
                                    <th>Plant</th>
                                    <th>Client</th>
                                    <th>Manufacturer</th>
                                    <th>Inward Date</th>
                                    <th>GRN No.</th>
                                    <th>Actions</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach ($inwards as $index => $inward)
                                    <tr>
                                        <td>{{ $inwards->firstItem() + $index }}</td>
                                        <td>{{ $inward->inward_code }}</td>
                                        <td>
                                            @php
                                                $chunks = $inward->coils->chunk(2);
                                            @endphp

                                            @if ($chunks->isEmpty())
                                                <span class="text-muted">N/A</span>
                                            @else
                                                <table style="border-collapse: collapse; padding: 0; margin: 0;">
                                                    @foreach ($chunks as $chunk)
                                                        <tr>
                                                            @foreach ($chunk as $coil)
                                                                <td style="padding: 2px 8px; border: none;">
                                                                    <li>{{ $coil->crr_no }}</li></td>
                                                            @endforeach

                                                            @if ($chunk->count() < 2)
                                                                <td style="padding: 2px 8px; border: none;"></td>
                                                            @endif
                                                        </tr>
                                                    @endforeach
                                                </table>
                                            @endif
                                        </td>

                                        <td>{{ $inward->plant->name ?? 'N/A' }}</td>
                                        <td>{{ $inward->client->client_name ?? 'N/A' }}</td>
                                        <td>{{ $inward->manufacturer->manufacturer_name ?? 'N/A' }}</td>
                                        <td>{{ $inward->inward_date }}</td>
                                        <td>{{ $inward->grn_no }}</td>
                                        <td>
                                            <div class="action-buttons">
                                                @can('show-inward')
                                                    <a href="{{ route('inward.show', $inward->inward_id) }}"
                                                        class="btn btn-info btn-sm text-white">View</a>
                                                @endcan

                                                @can('edit-inward')
                                                    @if ($inward->plans->isEmpty() || $inward->plans->pluck('status')->every(fn($status) => strtolower(trim($status ?? '')) === 'pending'))
                                                        <a href="{{ route('inward.edit', $inward->inward_id) }}"
                                                            class="btn btn-success btn-sm">Edit</a>
                                                    @endif
                                                @endcan

                                                @can('delete-inward')
                                                    @if ($inward->plans->isEmpty() || $inward->plans->pluck('status')->every(fn($status) => strtolower(trim($status ?? '')) === 'pending'))
                                                        <form action="{{ route('inward.destroy', $inward->inward_id) }}"
                                                              method="POST" class="delete-form" style="display:inline;">
                                                            @csrf
                                                            @method('DELETE')
                                                            <button type="button"
                                                                    class="btn btn-danger btn-sm delete-inward-btn"
                                                                    data-plans='@json($inward->plans->map(fn($plan) => [
                                                                    ]))'>Delete</button>
                                                        </form>
                                                    @endif
                                                @endcan

                                               
                                            </div>
                                        </td>
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                @endif

                <!-- Pagination Links -->
                <div class="mt-3">
                    {{ $inwards->links() }}
                </div>
            </div>
        </div>
    </div>

    <!-- JavaScript Dependencies -->
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.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://cdn.jsdelivr.net/npm/sweetalert2@11"></script>

    <!-- Initialize DataTables and Delete Confirmation -->
    <script>
        $(document).ready(function() {
            // Initialize DataTable
            const table = $('#inwardsTable').DataTable({
                responsive: true,
                pageLength: 20,
                lengthMenu: [5, 10, 25, 50],
                order: [[0, 'asc']],
                language: {
                    emptyTable: "No inwards available in the table",
                    search: "Search:",
                    lengthMenu: "Show _MENU_ entries",
                    info: "Showing _START_ to _END_ of _TOTAL_ entries",
                    paginate: {
                        previous: "Prev",
                        next: "Next"
                    }
                },
                columnDefs: [
                    { targets: '_all', className: 'align-middle' },
                    { orderable: false, targets: 8 },
                    { searchable: false, targets: 8 }
                ]
            });

            // Delete confirmation with SweetAlert2
            $('.delete-inward-btn').on('click', function() {
                const form = $(this).closest('form');
                const plans = $(this).data('plans');

                // Format plans data for display
                let plansHtml = plans.length > 0 
    ? '<ul class="text-danger">' 
    : '<span class="text-danger">No Related Plan</span>';

                plans.forEach(plan => {
                    // plansHtml += `<li><strong>Status:</strong> ${plan.Status}</li>`;
                });
                if (plans.length > 0) plansHtml += '</ul>';

                Swal.fire({
                    title: 'Are you sure?',
                    html: `You are about to delete this inward and its related plans<br>${plansHtml}<br>This action cannot be undone!`,
                    icon: 'warning',
                    showCancelButton: true,
                    confirmButtonColor: '#d33',
                    cancelButtonColor: '#3085d6',
                    confirmButtonText: 'Yes, delete it!'
                }).then((result) => {
                    if (result.isConfirmed) {
                        form[0].submit();
                    }
                });
            });
        });
    </script>
@endsection