@extends('layouts.app')

@section('title', 'New Project | DYSON LATAM')

@section('content')

    <style>
        .dyson-project-form {
            --dy-surface: #ffffff;
            --dy-surface2: #f5f6fb;
            --dy-border: #dde1ee;
            --dy-accent: #3b6ef5;
            --dy-text: #1a1d2e;
            --dy-muted: #7a80a0;
            --dy-red: #d03535;
            --dy-radius: 12px;
            --dy-shadow: 0 1px 4px rgba(40, 60, 120, .07);

            color: var(--dy-text);
        }

        .dyson-project-form * {
            box-sizing: border-box;
        }

        /*
        |--------------------------------------------------------------------------
        | HEADER
        |--------------------------------------------------------------------------
        */

        .dyson-project-form .form-header {
            display: flex;
            align-items: flex-start;
            justify-content: space-between;
            gap: 15px;
            margin-bottom: 18px;
        }

        .dyson-project-form .form-title {
            margin: 0;
            font-size: 1.15rem;
            font-weight: 800;
            letter-spacing: .02em;
        }

        .dyson-project-form .form-subtitle {
            margin-top: 4px;
            color: var(--dy-muted);
            font-family: monospace;
            font-size: .68rem;
            text-transform: uppercase;
            letter-spacing: .07em;
        }

        .dyson-project-form .back-button {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            height: 35px;
            padding: 0 13px;
            border: 1px solid var(--dy-border);
            border-radius: 8px;
            background: var(--dy-surface);
            color: var(--dy-muted);
            font-size: .7rem;
            font-weight: 700;
            text-decoration: none;
        }

        .dyson-project-form .back-button:hover {
            color: var(--dy-accent);
            border-color: var(--dy-accent);
        }

        /*
        |--------------------------------------------------------------------------
        | CARD
        |--------------------------------------------------------------------------
        */

        .dyson-project-form .form-card {
            background: var(--dy-surface);
            border: 1px solid var(--dy-border);
            border-radius: var(--dy-radius);
            box-shadow: var(--dy-shadow);
            max-width: 900px;
        }

        .dyson-project-form .form-card-header {
            padding: 15px 17px;
            border-bottom: 1px solid var(--dy-border);
            background: var(--dy-surface2);
        }

        .dyson-project-form .form-card-title {
            font-size: .78rem;
            font-weight: 800;
        }

        .dyson-project-form .form-card-description {
            margin-top: 3px;
            color: var(--dy-muted);
            font-family: monospace;
            font-size: .58rem;
        }

        .dyson-project-form .form-body {
            padding: 20px;
        }

        /*
        |--------------------------------------------------------------------------
        | GRID
        |--------------------------------------------------------------------------
        */

        .dyson-project-form .form-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 17px;
        }

        .dyson-project-form .form-group.full {
            grid-column: 1 / -1;
        }

        /*
        |--------------------------------------------------------------------------
        | LABELS
        |--------------------------------------------------------------------------
        */

        .dyson-project-form .form-label {
            display: block;
            margin-bottom: 6px;
            color: var(--dy-muted);
            font-family: monospace;
            font-size: .6rem;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: .07em;
        }

        .dyson-project-form .required {
            color: var(--dy-red);
        }

        /*
        |--------------------------------------------------------------------------
        | INPUTS
        |--------------------------------------------------------------------------
        */

        .dyson-project-form .form-control {
            width: 100%;
            height: 38px;
            padding: 8px 10px;
            border: 1px solid var(--dy-border);
            border-radius: 8px;
            background: var(--dy-surface);
            color: var(--dy-text);
            font-size: .75rem;
            outline: none;
        }

        .dyson-project-form textarea.form-control {
            height: auto;
            min-height: 100px;
            resize: vertical;
        }

        .dyson-project-form .form-control:focus {
            border-color: var(--dy-accent);
            box-shadow: 0 0 0 3px rgba(59, 110, 245, .08);
        }

        .dyson-project-form .form-control::placeholder {
            color: #a1a6bd;
        }

        /*
        |--------------------------------------------------------------------------
        | ERROR
        |--------------------------------------------------------------------------
        */

        .dyson-project-form .field-error {
            margin-top: 5px;
            color: var(--dy-red);
            font-family: monospace;
            font-size: .58rem;
        }

        .dyson-project-form .validation-summary {
            margin-bottom: 17px;
            padding: 11px 13px;
            border: 1px solid rgba(208, 53, 53, .25);
            border-radius: 9px;
            background: rgba(208, 53, 53, .08);
            color: var(--dy-red);
            font-family: monospace;
            font-size: .65rem;
        }

        .dyson-project-form .validation-summary ul {
            margin: 0;
            padding-left: 18px;
        }

        /*
        |--------------------------------------------------------------------------
        | INFO
        |--------------------------------------------------------------------------
        */

        .dyson-project-form .info-box {
            margin-top: 18px;
            padding: 11px 13px;
            border: 1px solid var(--dy-border);
            border-radius: 9px;
            background: var(--dy-surface2);
            color: var(--dy-muted);
            font-family: monospace;
            font-size: .59rem;
            line-height: 1.5;
        }

        /*
        |--------------------------------------------------------------------------
        | ACTIONS
        |--------------------------------------------------------------------------
        */

        .dyson-project-form .form-actions {
            display: flex;
            justify-content: flex-end;
            align-items: center;
            gap: 8px;
            padding: 14px 20px;
            border-top: 1px solid var(--dy-border);
            background: var(--dy-surface2);
        }

        .dyson-project-form .btn-cancel {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            height: 36px;
            padding: 0 14px;
            border: 1px solid var(--dy-border);
            border-radius: 8px;
            background: var(--dy-surface);
            color: var(--dy-muted);
            font-size: .7rem;
            font-weight: 700;
            text-decoration: none;
        }

        .dyson-project-form .btn-cancel:hover {
            color: var(--dy-text);
        }

        .dyson-project-form .btn-save {
            height: 36px;
            padding: 0 16px;
            border: 0;
            border-radius: 8px;
            background: var(--dy-accent);
            color: #ffffff;
            font-size: .7rem;
            font-weight: 700;
            cursor: pointer;
            box-shadow: 0 2px 7px rgba(59, 110, 245, .18);
        }

        .dyson-project-form .btn-save:hover {
            background: #2f5fdc;
        }

        /*
        |--------------------------------------------------------------------------
        | RESPONSIVE
        |--------------------------------------------------------------------------
        */

        @media(max-width:700px) {

            .dyson-project-form .form-header {
                flex-direction: column;
            }

            .dyson-project-form .back-button {
                width: 100%;
            }

            .dyson-project-form .form-grid {
                grid-template-columns: 1fr;
            }

            .dyson-project-form .form-group.full {
                grid-column: auto;
            }

            .dyson-project-form .form-actions {
                flex-direction: column-reverse;
            }

            .dyson-project-form .btn-cancel,
            .dyson-project-form .btn-save {
                width: 100%;
            }

        }
    </style>


    <div class="dyson-project-form">


        {{-- HEADER --}}

        <div class="form-header">

            <div>

                <h1 class="form-title">
                    New Project
                </h1>

                <div class="form-subtitle">
                    New Product Development / Project Registration
                </div>

            </div>


            <a href="{{ route('projects.index') }}" class="back-button">

                ← BACK TO PROJECTS

            </a>

        </div>


        {{-- FORM CARD --}}

        <div class="form-card">


            <div class="form-card-header">

                <div class="form-card-title">
                    Project Information
                </div>

                <div class="form-card-description">
                    Register a new NPD project and configure its initial compliance workflow.
                </div>

            </div>


            <form method="POST" action="{{ route('projects.store') }}">

                @csrf


                <div class="form-body">


                    {{-- VALIDATION SUMMARY --}}

                    @if ($errors->any())

                        <div class="validation-summary">

                            <strong>
                                Please review the following fields:
                            </strong>

                            <ul>

                                @foreach ($errors->all() as $error)
                                    <li>
                                        {{ $error }}
                                    </li>
                                @endforeach

                            </ul>

                        </div>

                    @endif


                    <div class="form-grid">


                        {{-- PROJECT NAME --}}

                        <div class="form-group full">

                            <label for="name" class="form-label">

                                Project Name
                                <span class="required">*</span>

                            </label>

                            <input type="text" id="name" name="name" class="form-control"
                                value="{{ old('name') }}" placeholder="Enter project name" required>

                            @error('name')
                                <div class="field-error">
                                    {{ $message }}
                                </div>
                            @enderror

                        </div>


                        {{-- MODEL --}}

                        <div class="form-group">

                            <label for="model" class="form-label">

                                Model
                                <span class="required">*</span>

                            </label>

                            <input type="text" id="model" name="model" class="form-control"
                                value="{{ old('model') }}" placeholder="Enter model" required>

                            @error('model')
                                <div class="field-error">
                                    {{ $message }}
                                </div>
                            @enderror

                        </div>


                        {{-- LAUNCH DATE --}}

                        <div class="form-group">

                            <label for="launch_date" class="form-label">

                                Launch Date
                                <span class="required">*</span>

                            </label>

                            <input type="date" id="launch_date" name="launch_date" class="form-control"
                                value="{{ old('launch_date') }}" required>

                            @error('launch_date')
                                <div class="field-error">
                                    {{ $message }}
                                </div>
                            @enderror

                        </div>


                        {{-- COUNTRY --}}

                        <div class="form-group">

                            <label for="country_id" class="form-label">

                                Country
                                <span class="required">*</span>

                            </label>

                            <select id="country_id" name="country_id" class="form-control" required>

                                <option value="">
                                    Select country
                                </option>

                                @foreach ($countries as $country)
                                    <option value="{{ $country->id }}" @selected(old('country_id') == $country->id)>

                                        {{ $country->name }}

                                    </option>
                                @endforeach

                            </select>

                            @error('country_id')
                                <div class="field-error">
                                    {{ $message }}
                                </div>
                            @enderror

                        </div>


                        {{-- CATEGORY --}}

                        <div class="form-group">

                            <label for="category_id" class="form-label">

                                Category
                                <span class="required">*</span>

                            </label>

                            <select id="category_id" name="category_id" class="form-control" required>

                                <option value="">
                                    Select category
                                </option>

                                @foreach ($categories as $category)
                                    <option value="{{ $category->id }}" @selected(old('category_id') == $category->id)>

                                        {{ $category->name }}

                                    </option>
                                @endforeach

                            </select>

                            @error('category_id')
                                <div class="field-error">
                                    {{ $message }}
                                </div>
                            @enderror

                        </div>


                    </div>


                    <div class="info-box">

                        When the project is created, the system will automatically
                        generate the initial stages and certifications associated
                        with the selected country.

                    </div>


                </div>


                {{-- ACTIONS --}}

                <div class="form-actions">

                    <a href="{{ route('projects.index') }}" class="btn-cancel">

                        CANCEL

                    </a>


                    <button type="submit" class="btn-save">

                        CREATE PROJECT

                    </button>

                </div>


            </form>


        </div>


    </div>

@endsection