@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-plan-btn {
            margin-bottom: 1.5rem;
            background-color: rgb(54, 72, 212);
            color: white;
        }

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

        /* Status colors */
        .status-pending {
            color: #dc3545;
            font-weight: bold;
        }

        .status-approved {
            color: #ffc107;
            font-weight: bold;
        }

        .status-Completed {
            color: #198754;
            font-weight: bold;
        }

        .status-Under\ Production {
            color: #0d6efd;
            font-weight: bold;
        }

        .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">Plan List</h2>

        @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
        @if (session('error'))
            <div class="alert alert-danger alert-dismissible fade show" role="alert">
                {{ session('error') }}
                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
            </div>
        @endif

        <a href="{{ route('plans.create') }}" class="btn create-plan-btn">+ Create New Plan</a>

        <div class="card">
            <div class="card-body">
                @if ($plans->isEmpty())
                    <div class="alert alert-info" role="alert">
                        No plans available. Click "Create New Plan" to add one.
                    </div>
                @else
                    <div class="table-responsive">
                        <table id="plansTable" class="table table-bordered table-hover">
                            <thead>
                                <tr>
                                    <th>Sr No.</th>
                                    <th>Client Name</th>
                                    <th>CRR No.</th>
                                    <th>Grade</th>
                                    <th>Total Used Weight (TON)</th>
                                    <th>CRS Balance Weight (TON)</th>
                                    <th>CTL Balance Weight (TON)</th>
                                    <th>Status</th>
                                    <th>Actions</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach ($plans as $index => $plan)
                                    <tr>
                                        <td>{{ $index + 1 }}</td>
                                        <td>{{ $plan->client->client_name ?? 'N/A' }}</td>
                                        <td>{{ $plan->coil->crr_no ?? 'N/A' }}</td>
                                        <td>{{ $plan->grade->grade_name ?? 'N/A' }}</td>
                                        <td>{{ number_format($plan->total_used_weight, 3) }}</td>
                                        <td>{{ number_format($plan->total_crs_bal_weight, 3) }} </td>
                                        <td>{{ number_format($plan->total_ctl_bal_weight, 3) }}</td>
                                        <td>
                                            <span class="status-{{ str_replace(' ', '\ ', $plan->status) }}">{{ ucfirst($plan->status) }}</span>
                                        </td>
                                        <td>
                                            <div class="action-buttons">
                                                <a href="{{ route('plans.show', $plan->id) }}" class="btn btn-info text-white btn-sm">View</a>
                                                @can('edit-plan')
                                                @if(ucfirst($plan->status)=="Pending")
                                                <a href="{{ route('plans.edit', $plan->id) }}" class="btn btn-primary btn-sm">Edit</a>
                                                @endcan
                                                <form action="{{ route('plans.destroy', $plan->id) }}" method="POST" class="delete-form" style="display:inline;">
                                                    @csrf
                                                    @method('DELETE')
                                                    <button type="submit" class="btn btn-danger btn-sm"
                                                        onclick="return confirm('Are you sure you want to delete this plan?')">Delete</button>
                                                </form>
                                                @endif
                                                @if($plan->crs_bal_weight>0)
                                                <!--<a href="{{ route('plans.recreate', $plan->id) }}" class="btn btn-success btn-sm">Create Plan</a>-->
                                                @endif
                                            </div>
                                        </td>
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                @endif
            </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>

    <!-- Initialize DataTables -->
    <script>
        $(document).ready(function () {
            $('#plansTable').DataTable({
                responsive: true,
                pageLength: 10,
                order: [[0, 'desc']],
                language: {
                    emptyTable: "No plans 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' }
                ]
            });
        });
    </script>
@endsection