@extends('layouts.owner')

@section('title', 'Infrastructure Deployment')
@section('header_title', 'Node Registration')

@section('content')
    <div class="container-fluid" style="max-width: 1100px;">
        <div class="registration-header mb-5">
            <h1 class="main-title">Establish New Infrastructure</h1>
            <p class="subtitle text-muted">Initialize your sports node within the INDOOR PLAYS Global Network. Complete all
                metrics for optimal discovery.</p>
        </div>

        <form action="{{ route('clubs.store') }}" method="POST" enctype="multipart/form-data" class="node-form">
            @csrf

            <div class="form-section card mb-4">
                <div class="card-header-protocol">
                    <i class="fas fa-microchip"></i> Core Specifications
                </div>
                <div class="card-body p-4">
                    <div class="row g-4 mb-4">
                        <div class="col-md-8">
                            <label class="protocol-label">Infastructure Name</label>
                            <div class="input-wrapper">
                                <i class="fas fa-building-circle-check"></i>
                                <input type="text" name="name" class="protocol-input"
                                    placeholder="e.g. Islamabad Elite Sports Complex" required>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <label class="protocol-label">Primary Discipline</label>
                            <div class="input-wrapper">
                                <i class="fas fa-medal"></i>
                                <select name="sport_id" class="protocol-input" required>
                                    <option value="">Select Protocol</option>
                                    @foreach($sports as $sport)
                                        <option value="{{ $sport->id }}">{{ $sport->name }}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                    </div>

                    <div class="mb-4">
                        <label class="protocol-label">Geospatial Address</label>
                        <div class="input-wrapper align-items-start py-3">
                            <i class="fas fa-location-dot mt-1"></i>
                            <textarea name="address" rows="2" class="protocol-input bg-transparent border-0"
                                placeholder="Specify the precise deployment coordinates..." required
                                style="height: auto; resize: none;"></textarea>
                        </div>
                    </div>
                </div>
            </div>

            <div class="form-section card mb-4">
                <div class="card-header-protocol">
                    <i class="fas fa-clock"></i> Temporal Logistics
                </div>
                <div class="card-body p-4">
                    <div class="row g-4">
                        <div class="col-md-4">
                            <label class="protocol-label">Activation (Opening)</label>
                            <div class="input-wrapper">
                                <i class="fas fa-sun"></i>
                                <input type="time" name="opening_time" class="protocol-input" value="17:00" required>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <label class="protocol-label">Deactivation (Closing)</label>
                            <div class="input-wrapper">
                                <i class="fas fa-moon"></i>
                                <input type="time" name="closing_time" class="protocol-input" value="02:00" required>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <label class="protocol-label">Session Quanta (Duration)</label>
                            <div class="input-wrapper">
                                <i class="fas fa-stopwatch"></i>
                                <select name="slot_duration" class="protocol-input">
                                    <option value="60">60 Minutes</option>
                                    <option value="90">90 Minutes</option>
                                    <option value="120">120 Minutes</option>
                                </select>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="form-section card mb-4">
                <div class="card-header-protocol">
                    <i class="fas fa-file-invoice"></i> Intellectual Summary
                </div>
                <div class="card-body p-4">
                    <div class="mb-0">
                        <label class="protocol-label">Infrastructure Overview</label>
                        <textarea name="description" rows="4" class="protocol-input"
                            placeholder="Describe facility metrics, surface technology, and competitive advantages..."
                            style="height: auto;"></textarea>
                    </div>
                </div>
            </div>

            <div class="form-section card mb-4">
                <div class="card-header-protocol">
                    <i class="fas fa-toolbox"></i> Integrated Assets (Amenities)
                </div>
                <div class="card-body p-4">
                    <div class="amenities-grid">
                        @foreach($amenities as $amenity)
                            <div class="amenity-item">
                                <input type="checkbox" name="amenities[]" value="{{ $amenity->id }}"
                                    id="amenity-{{ $amenity->id }}" class="amenity-check">
                                <label for="amenity-{{ $amenity->id }}" class="amenity-card">
                                    <i class="fas {{ $amenity->icon }}"></i>
                                    <span>{{ $amenity->name }}</span>
                                    <div class="check-mark"><i class="fas fa-check"></i></div>
                                </label>
                            </div>
                        @endforeach
                    </div>
                </div>
            </div>

            <div class="form-section card mb-5">
                <div class="card-header-protocol">
                    <i class="fas fa-images"></i> Visual Authentication
                </div>
                <div class="card-body p-4 text-center">
                    <div class="visual-upload-area" onclick="document.getElementById('image-upload').click()">
                        <div class="upload-icon-pulse">
                            <i class="fas fa-cloud-arrow-up"></i>
                        </div>
                        <h4>Synchronize High-Definition Banner</h4>
                        <p>Supported: JPG, PNG, WEBP (Max 5MB). Optimal resolution: 1920x1080</p>
                        <input type="file" name="image" id="image-upload" class="d-none" accept="image/*"
                            onchange="previewImage(this)">
                        <div id="image-preview" class="image-preview-node mt-3"></div>
                    </div>
                </div>
            </div>

            <div class="d-grid mb-5">
                <button type="submit" class="btn btn-confirm-protocol">
                    <i class="fas fa-bolt"></i> INITIALIZE DEPLOYMENT
                </button>
            </div>
        </form>
    </div>

    <style>
        /* Typography & Headers */
        .main-title {
            font-family: 'Montserrat', sans-serif;
            font-weight: 800;
            color: var(--secondary);
            font-size: 2.8rem;
            letter-spacing: -1.5px;
        }

        .subtitle {
            font-size: 1.15rem;
            font-weight: 500;
        }

        .card-header-protocol {
            background: #f8fafc;
            padding: 1.5rem 2rem;
            border-bottom: 1px solid var(--border);
            font-weight: 700;
            color: var(--secondary);
            display: flex;
            align-items: center;
            gap: 0.75rem;
            text-transform: uppercase;
            letter-spacing: 0.1em;
            font-size: 0.85rem;
        }

        .card-header-protocol i {
            color: var(--primary);
            font-size: 1.1rem;
        }

        /* Form Elements */
        .protocol-label {
            display: block;
            font-weight: 800;
            color: var(--text-muted);
            text-transform: uppercase;
            letter-spacing: 0.1em;
            font-size: 0.75rem;
            margin-bottom: 0.75rem;
            padding-left: 0.2rem;
        }

        .input-wrapper {
            display: flex;
            align-items: center;
            background: #fff;
            border: 2px solid var(--border);
            border-radius: 18px;
            padding: 0.4rem 1.4rem;
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        }

        .input-wrapper:focus-within {
            border-color: var(--primary);
            box-shadow: 0 0 0 4px rgba(34, 197, 94, 0.1);
        }

        .input-wrapper i {
            color: #cbd5e1;
            margin-right: 1.25rem;
            font-size: 1.1rem;
            transition: 0.3s;
        }

        .input-wrapper:focus-within i {
            color: var(--primary);
        }

        .protocol-input {
            width: 100%;
            border: none;
            outline: none;
            padding: 0.8rem 0;
            font-weight: 600;
            font-size: 1rem;
            color: var(--secondary);
            background: transparent;
        }

        .protocol-input::placeholder {
            color: #94a3b8;
            font-weight: 500;
        }

        /* Amenities Grid */
        .amenities-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
            gap: 1.25rem;
        }

        .amenity-check {
            display: none;
        }

        .amenity-card {
            display: flex;
            align-items: center;
            gap: 1rem;
            padding: 1.5rem;
            background: #fff;
            border: 2px solid var(--border);
            border-radius: 22px;
            cursor: pointer;
            transition: 0.3s;
            position: relative;
        }

        .amenity-card i {
            font-size: 1.5rem;
            color: #94a3b8;
        }

        .amenity-card span {
            font-weight: 700;
            color: var(--secondary);
            font-size: 0.95rem;
        }

        .amenity-card .check-mark {
            position: absolute;
            top: -10px;
            right: -10px;
            width: 28px;
            height: 28px;
            background: var(--primary);
            color: #fff;
            border-radius: 50%;
            opacity: 0;
            transform: scale(0);
            transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 0.8rem;
        }

        .amenity-check:checked+.amenity-card {
            border-color: var(--primary);
            background: #f0fdf4;
        }

        .amenity-check:checked+.amenity-card i {
            color: var(--primary);
        }

        .amenity-check:checked+.amenity-card .check-mark {
            opacity: 1;
            transform: scale(1);
        }

        /* Upload Area */
        .visual-upload-area {
            border: 2px dashed var(--border);
            border-radius: 35px;
            padding: 4rem 2rem;
            background: #f8fafc;
            cursor: pointer;
            transition: 0.3s;
        }

        .visual-upload-area:hover {
            border-color: var(--primary);
            background: #f0fdf4;
        }

        .upload-icon-pulse {
            width: 80px;
            height: 80px;
            background: #fff;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto 1.5rem;
            color: var(--primary);
            font-size: 2rem;
            box-shadow: 0 10px 20px rgba(0, 0, 0, 0.05);
        }

        .visual-upload-area h4 {
            font-family: 'Montserrat', sans-serif;
            font-weight: 800;
            margin-bottom: 0.8rem;
        }

        .visual-upload-area p {
            color: var(--text-muted);
            font-weight: 500;
        }

        /* Submit Button */
        .btn-confirm-protocol {
            padding: 1.5rem;
            background: var(--secondary);
            color: #fff;
            border-radius: 20px;
            font-weight: 800;
            font-size: 1.25rem;
            border: none;
            transition: all 0.3s;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 1rem;
            box-shadow: 0 15px 30px rgba(15, 23, 42, 0.2);
        }

        .btn-confirm-protocol:hover {
            background: var(--primary);
            transform: translateY(-3px);
            box-shadow: 0 20px 40px rgba(34, 197, 94, 0.3);
        }

        .image-preview-node img {
            max-width: 100%;
            border-radius: 20px;
            margin-top: 1rem;
            box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
        }
    </style>

    <script>
        function previewImage(input) {
            if (input.files && input.files[0]) {
                var reader = new FileReader();
                reader.onload = function (e) {
                    document.getElementById('image-preview').innerHTML = '<img src="' + e.target.result + '" alt="Node Preview">';
                }
                reader.readAsDataURL(input.files[0]);
            }
        }
    </script>
@endsection