@extends('layouts.app')
@section('page-pretitle', __('Management'))
@section('page-title', __('Projects'))

@section('content')
{{-- Flash Messages --}}
    @if ($errors->any())
        <div id="validation-alert" class="alert alert-danger alert-dismissible fade show position-fixed top-0 end-0 m-4 bg-red text-white d-flex align-items-center shadow" role="alert" style="z-index: 950; width: 450px;">
            <div class="flex-grow-1">
                <ul class="mb-0">
                    @foreach ($errors->all() as $error)
                        <li>{{ $error }}</li>
                    @endforeach
                </ul>
            </div>
            <button type="button" class="btn-close btn-close-white ms-2" data-bs-dismiss="alert" aria-label="Close"></button>
        </div>
    @endif

    @if (session('success'))
        <div id="success-alert" class="alert alert-success alert-dismissible fade show position-fixed top-0 end-0 m-4 bg-green text-white d-flex align-items-center shadow" role="alert" style="z-index: 950; width: 450px;">
            <div class="flex-grow-1">
                {{ session('success') }}
            </div>
            <button type="button" class="btn-close btn-close-white ms-2" data-bs-dismiss="alert" aria-label="Close"></button>
        </div>
    @endif

    {{-- Responsive Alert Styles --}}
    <style>
        @media (max-width: 768px) {
            #validation-alert, #success-alert {
                width: 90% !important;
                left: 5% !important;
            }
        }

        @media (max-width: 576px) {
            #validation-alert, #success-alert {
                width: 95% !important;
                left: 2.5% !important;
            }
        }
    </style>

    <div class="card shadow-sm">
        <div class="card-header d-flex justify-content-between align-items-center px-3 mt-2">
            Import Projects from CSV
            <a href="{{ route('projects.import.template') }}" class="btn btn-success ">
                <i class="ti ti-download"></i> Download CSV Template
            </a>
        </div>

        {{-- <div class="d-flex justify-content-end align-items-center px-3 mt-2">
            <a href="{{ route('projects.import.template') }}" class="btn btn-outline-secondary ">
                <i class="ti ti-download"></i> Download CSV Template
            </a>
        </div> --}}

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

            <form method="POST" action="{{ route('project_list.import') }}" enctype="multipart/form-data">
                @csrf
                <div class="mb-3">
                    <label for="excel_file" class="form-label">CSV File (.csv)</label>
                    <input type="file" class="form-control" name="excel_file" accept=".csv" required>
                    <small class="form-text text-muted">
                        Required headers: <code>description</code>, <code>client</code>, <code>ref_no</code>, <code>scope_name</code>, <code>is_registration</code>, <code>project_type_name</code>
                        <br>
                        Make sure the <code>scope_name</code> and <code>project_type_name</code> already exist in the setup
                    </small>
                </div>
                <div class="d-flex justify-content-end">
                    <a href="{{ route('project_list.index') }}" class="btn btn-outline-secondary me-2">Back</a>
                    <button type="submit" class="btn btn-primary">Import</button>
                </div>
            </form>

        </div>
    </div>
@endsection