@extends('admin.layouts.app')

@section('page-title', 'Add Container')

@section('content')
<style>
    .cm-add-wrapper {
        padding: 10px 0 20px 0;
    }

    .cm-add-header-card {
        border-radius: 14px;
        border: none;
        margin-bottom: 18px;
        background: linear-gradient(90deg,#4c6fff,#8e54e9);
        box-shadow: 0 6px 18px rgba(15,35,52,0.18);
        color: #ffffff;
    }

    .cm-add-header-card .card-body {
        padding: 14px 18px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
    }

    .cm-add-title {
        margin: 0;
        font-size: 20px;
        font-weight: 600;
    }

    .cm-add-sub {
        font-size: 12px;
        opacity: 0.9;
    }

    .cm-add-main-card {
        border-radius: 14px;
        border: none;
        box-shadow: 0 6px 18px rgba(15,35,52,0.12);
    }

    .cm-add-main-card .card-header {
        background:#ffffff;
        border-bottom: 1px solid #edf0f5;
        padding: 10px 18px;
    }

    .cm-add-main-card .card-header h5 {
        margin: 0;
        font-size: 16px;
        font-weight: 600;
    }

    .cm-form-label {
        font-size: 13px;
        font-weight: 500;
        color:#495057;
        margin-bottom: 4px;
    }

    .cm-form-control {
        font-size: 13px;
        border-radius: 10px;
        border:1px solid #d0d7e2;
        padding: 8px 11px;
    }

    .cm-form-control:focus {
        border-color:#4c6fff;
        box-shadow:0 0 0 0.15rem rgba(76,111,255,.25);
    }

    .cm-help-text {
        font-size: 11px;
        color:#868e96;
        margin-top: 2px;
    }

    .cm-btn-primary {
        border-radius: 20px;
        padding: 6px 22px;
        font-size: 13px;
        font-weight: 500;
    }

    .cm-btn-secondary {
        border-radius: 20px;
        padding: 6px 18px;
        font-size: 13px;
    }

    .cm-error-list {
        font-size: 13px;
    }
</style>

<div class="container-fluid cm-add-wrapper">

    {{-- TOP GRADIENT HEADER --}}
    <div class="card cm-add-header-card">
        <div class="card-body">
            <div>
                <h4 class="cm-add-title">Create New Container</h4>
                <div class="cm-add-sub">
                    Add container details and upload Kent loading list Excel file.
                </div>
            </div>
            <a href="{{ route('containers.index') }}" class="btn btn-light btn-sm">
                Back to Containers
            </a>
        </div>
    </div>

    {{-- MAIN CARD --}}
    <div class="card cm-add-main-card">
        <div class="card-header">
            <h5>Add Container</h5>
        </div>
        <div class="card-body">

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

            {{-- VALIDATION ERRORS --}}
            @if ($errors->any())
                <div class="alert alert-danger">
                    <ul class="mb-0 cm-error-list">
                        @foreach ($errors->all() as $error)
                            <li>{{ $error }}</li>
                        @endforeach
                    </ul>
                </div>
            @endif

            {{-- UNMATCHED ROWS TABLE --}}
            @if (session('unmatched_rows'))
                <div class="alert alert-warning mt-3">
                    <strong>Mark number not matched:</strong>
                    

                    @php
                        $unmatchedRows = session('unmatched_rows');
                        $headings = [];
                        if (!empty($unmatchedRows)) {
                            $headings = array_keys($unmatchedRows[0]['data'] ?? []);
                            // इथे Excel मधला 'MARK' कॉलम hide करतो, कारण आधीच Mark No वेगळा column आहे
                            $headings = array_filter($headings, function ($h) {
                                return strtoupper(trim($h)) !== 'MARK';
                            });
                        }
                    @endphp

                    @if(!empty($unmatchedRows))
                        <div class="table-responsive" style="max-height:260px; overflow:auto; border:1px solid #e3e6ef;">
                            <table class="table table-sm table-bordered mb-0" style="font-size:11.5px; min-width:800px;">
                                <thead class="table-light">
                                    <tr>
                                        <th>Excel Row</th>
                                        <th>Mark No</th>
                                        @foreach($headings as $head)
                                            <th>{{ $head }}</th>
                                        @endforeach
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach($unmatchedRows as $row)
                                        <tr>
                                            <td>{{ $row['excel_row'] }}</td>
                                            <td>{{ $row['mark_no'] }}</td>
                                            @foreach($headings as $head)
                                                <td>{{ $row['data'][$head] ?? '' }}</td>
                                            @endforeach
                                        </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>
                    @endif
                </div>
            @endif

            {{-- FORM: unmatched_rows असल्यावर form लपवायचा असेल तर खालील condition ठेवा --}}
            @if (!session('unmatched_rows'))
                <form action="{{ route('containers.store') }}" method="POST" enctype="multipart/form-data" class="mt-3">
                    @csrf

                    <div class="row g-3">
                        {{-- Container Name --}}
                        <div class="col-md-6">
                            <label class="cm-form-label">Container Name</label>
                            <input type="text"
                                   name="container_name"
                                   class="form-control cm-form-control"
                                   value="{{ old('container_name') }}"
                                   placeholder="Enter container name">
                        </div>

                        {{-- Container Number --}}
                        <div class="col-md-6">
                            <label class="cm-form-label">Container Number</label>
                            <input type="text"
                                   name="container_number"
                                   class="form-control cm-form-control"
                                   value="{{ old('container_number') }}"
                                   placeholder="Enter container number">
                        </div>

                        {{-- Container Date --}}
                        <div class="col-md-6">
                            <label class="cm-form-label">Container Date</label>
                            <input type="date"
                                   name="container_date"
                                   class="form-control cm-form-control"
                                   value="{{ old('container_date') }}">
                        </div>

                        {{-- Excel File --}}
                        <div class="col-md-6">
                            <label class="cm-form-label">Loading List Excel</label>
                            <input type="file"
                                   name="excel_file"
                                   class="form-control cm-form-control"
                                   accept=".xls,.xlsx">
                            <div class="cm-help-text">
                                Upload Kent loading list Excel file (.xls / .xlsx).
                            </div>
                        </div>
                    </div>

                    <div class="mt-4 d-flex gap-2">
                        <button type="submit" class="btn btn-primary cm-btn-primary">
                            Save Container
                        </button>
                        <a href="{{ route('containers.index') }}" class="btn btn-outline-secondary cm-btn-secondary">
                            Cancel
                        </a>
                    </div>
                </form>
            @endif

        </div>
    </div>
</div>
@endsection