@extends('layouts.app')

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

@section('content')

    <style>
        .dyson-edit {
            color: #1a1d2e;
        }

        .dyson-edit .edit-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 16px;
            margin-bottom: 20px;
        }

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

        .dyson-edit .edit-subtitle {
            margin-top: 5px;
            color: #7a80a0;
            font-family: monospace;
            font-size: .65rem;
            letter-spacing: .07em;
            text-transform: uppercase;
        }

        .dyson-edit .header-actions {
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .dyson-edit .btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 7px;
            min-height: 38px;
            padding: 0 14px;
            border-radius: 8px;
            text-decoration: none;
            font-size: .7rem;
            font-weight: 700;
            cursor: pointer;
        }

        .dyson-edit .btn-back {
            background: #fff;
            color: #7a80a0;
            border: 1px solid #dde1ee;
        }

        .dyson-edit .btn-back:hover {
            color: #1a1d2e;
            border-color: #3b6ef5;
        }

        .dyson-edit .btn-primary {
            border: 0;
            background: #3b6ef5;
            color: #fff;
            box-shadow: 0 2px 7px rgba(59, 110, 245, .18);
        }

        .dyson-edit .btn-primary:hover {
            background: #2f5fdc;
        }

        .dyson-edit .edit-card {
            background: #fff;
            border: 1px solid #dde1ee;
            border-radius: 12px;
            box-shadow: 0 1px 4px rgba(40, 60, 120, .07);
            overflow: hidden;
        }

        .dyson-edit .card-header {
            padding: 15px 18px;
            background: #f5f6fb;
            border-bottom: 1px solid #dde1ee;
        }

        .dyson-edit .card-title {
            margin: 0;
            font-size: .8rem;
            font-weight: 800;
        }

        .dyson-edit .card-subtitle {
            margin-top: 4px;
            color: #7a80a0;
            font-family: monospace;
            font-size: .58rem;
        }

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

        .dyson-edit .form-grid {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 16px;
        }

        .dyson-edit .form-group {
            min-width: 0;
        }

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

        .dyson-edit label {
            display: block;
            margin-bottom: 6px;
            color: #7a80a0;
            font-family: monospace;
            font-size: .58rem;
            font-weight: 700;
            letter-spacing: .06em;
            text-transform: uppercase;
        }

        .dyson-edit .form-control {
            width: 100%;
            height: 40px;
            padding: 8px 11px;
            border: 1px solid #dde1ee;
            border-radius: 8px;
            background: #fff;
            color: #1a1d2e;
            font-size: .72rem;
            outline: none;
        }

        .dyson-edit .form-control:focus {
            border-color: #3b6ef5;
            box-shadow: 0 0 0 3px rgba(59, 110, 245, .08);
        }

        .dyson-edit .form-error {
            margin-top: 5px;
            color: #d03535;
            font-family: monospace;
            font-size: .58rem;
        }

        .dyson-edit .error-box {
            margin-bottom: 16px;
            padding: 11px 13px;
            border: 1px solid rgba(208, 53, 53, .25);
            border-radius: 9px;
            background: rgba(208, 53, 53, .08);
            color: #d03535;
            font-family: monospace;
            font-size: .65rem;
        }

        .dyson-edit .form-footer {
            display: flex;
            justify-content: flex-end;
            gap: 8px;
            margin-top: 20px;
            padding-top: 16px;
            border-top: 1px solid #dde1ee;
        }

        @media (max-width: 700px) {
            .dyson-edit .edit-header {
                align-items: flex-start;
                flex-direction: column;
            }

            .dyson-edit .header-actions {
                width: 100%;
            }

            .dyson-edit .header-actions .btn {
                flex: 1;
            }

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

            .dyson-edit .form-group.full {
                grid-column: auto;
            }
        }
    </style>

    <div class="dyson-edit">

        <div class="edit-header">

            <div>
                <h1 class="edit-title">
                    Edit Project
                </h1>

                <div class="edit-subtitle">
                    {{ $project->name }} · {{ $project->model }}
                </div>
            </div>

            <div class="header-actions">

                <a href="{{ route('projects.show', $project) }}" class="btn btn-back">
                    ← BACK
                </a>

            </div>

        </div>


        <div class="edit-card">

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

                <div class="card-subtitle">
                    UPDATE PROJECT DATA
                </div>
            </div>


            <div class="form-body">

                @if ($errors->any())

                    <div class="error-box">
                        <strong>Please correct the following errors:</strong>

                        <ul style="margin: 7px 0 0 16px; padding: 0;">
                            @foreach ($errors->all() as $error)
                                <li>{{ $error }}</li>
                            @endforeach
                        </ul>
                    </div>

                @endif


                <form action="{{ route('projects.update', $project) }}" method="POST">

                    @csrf
                    @method('PUT')


                    <div class="form-grid">

                        <div class="form-group">

                            <label for="name">
                                Project Name
                            </label>

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

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

                        </div>


                        <div class="form-group">

                            <label for="model">
                                Model
                            </label>

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

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

                        </div>


                        <div class="form-group">

                            <label for="launch_date">
                                Launch Date
                            </label>

                            <input type="date" id="launch_date" name="launch_date" class="form-control"
                                value="{{ old('launch_date', optional($project->launch_date)->format('Y-m-d')) }}" required>

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

                        </div>


                        <div class="form-group">

                            <label for="country_id">
                                Country
                            </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', $project->country_id) == $country->id)>
                                        {{ $country->name }}
                                    </option>
                                @endforeach

                            </select>

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

                        </div>


                        <div class="form-group">

                            <label for="category_id">
                                Category
                            </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', $project->category_id) == $category->id)>
                                        {{ $category->name }}
                                    </option>
                                @endforeach

                            </select>

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

                        </div>

                    </div>


                    <div class="form-footer">

                        <a href="{{ route('projects.show', $project) }}" class="btn btn-back">
                            CANCEL
                        </a>

                        <button type="submit" class="btn btn-primary">
                            UPDATE PROJECT
                        </button>

                    </div>

                </form>

            </div>

        </div>

    </div>

@endsection