@extends('frontend.layouts.app')

@push('style')
    <style>
        .form-section {
            font-family: 'Segoe UI', sans-serif;
            padding: 40px;
            background-color: #fff;
            border-radius: 8px;
            box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
            max-width: 700px;
            margin: 40px auto;
        }

        .form-section h2 {
            text-align: center;
            color: #3b5998;
            margin-bottom: 25px;
        }

        .form-group {
            margin-bottom: 20px;
        }

        label {
            font-weight: bold;
            margin-bottom: 5px;
            display: block;
        }

        .submit-btn {
            background-color: #015fc9;
            color: white;
            border: none;
            width: 100%;
            padding: 12px;
            border-radius: 6px;
            font-size: 16px;
            font-weight: bold;
            cursor: pointer;
        }

        .submit-btn:hover {
            background-color: #014eaa;
        }

        @media (max-width: 767px) {
            .form-section {
                margin: 0;
                border-radius: 0;
                box-shadow: none;
                padding: 20px;
            }
        }
    </style>
@endpush

@section('content')
    <div class="container-fluid page-header-modern">
        <div class="container">
            <h1>Organization Registration</h1>
            <ol class="breadcrumb breadcrumb-modern">
                <li class="breadcrumb-item"><a href="{{ url('/') }}">Home</a></li>
                <li class="breadcrumb-item">Pages</li>
                <li class="breadcrumb-item active">Register Organization</li>
            </ol>
        </div>
    </div>

    <div class="form-section">
        @if (session('success'))
            <div class="alert alert-success alert-dismissible fade show" role="alert">
                {{ session('success') }}
                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
            </div>
        @endif

        <form action="{{ route('organization_registration.store') }}" method="POST" enctype="multipart/form-data">
            @csrf
            <div class="form-group">
                <label for="full_name">Representative's Full Name</label>
                <input type="text" name="full_name" id="full_name"
                    class="form-control @error('full_name') is-invalid @enderror" value="{{ old('full_name') }}">
                @error('full_name')
                    <span class="invalid-feedback" role="alert">
                        <strong>{{ $message }}</strong>
                    </span>
                @enderror
            </div>

            <div class="form-group">
                <label for="organization_name">Organization Name</label>
                <input type="text" name="organization_name" id="organization_name"
                    class="form-control @error('organization_name') is-invalid @enderror"
                    value="{{ old('organization_name') }}">
                @error('organization_name')
                    <span class="invalid-feedback" role="alert">
                        <strong>{{ $message }}</strong>
                    </span>
                @enderror
            </div>

            <div class="form-group">
                <label for="registration_number">Registration Number</label>
                <input type="text" name="registration_number" id="registration_number"
                    class="form-control @error('registration_number') is-invalid @enderror"
                    value="{{ old('registration_number') }}">
                @error('registration_number')
                    <span class="invalid-feedback" role="alert">
                        <strong>{{ $message }}</strong>
                    </span>
                @enderror
            </div>

            <div class="form-group">
                <label for="organization_type">Organization Type</label>
                <select name="organization_type" id="organization_type"
                    class="form-control @error('organization_type') is-invalid @enderror">
                    <option value="">Select Type</option>
                    <option value="NGO">NGO</option>
                    <option value="Company">Company</option>
                    <option value="Club">Club</option>
                    <option value="Foundation">Foundation</option>
                    <option value="Other">Other</option>
                </select>
                @error('organization_type')
                    <span class="invalid-feedback" role="alert">
                        <strong>{{ $message }}</strong>
                    </span>
                @enderror
            </div>

            <div class="form-group">
                <label for="est_date">Established Date</label>
                <input type="date" name="est_date" id="est_date"
                    class="form-control @error('est_date') is-invalid @enderror" value="{{ old('est_date') }}">
                @error('est_date')
                    <span class="invalid-feedback" role="alert">
                        <strong>{{ $message }}</strong>
                    </span>
                @enderror
            </div>

            <div class="form-group">
                <label for="mobile">Mobile</label>
                <input type="tel" name="mobile" id="mobile"
                    class="form-control @error('mobile') is-invalid @enderror" value="{{ old('mobile') }}">
                @error('mobile')
                    <span class="invalid-feedback" role="alert">
                        <strong>{{ $message }}</strong>
                    </span>
                @enderror
            </div>

            <div class="form-group">
                <label for="email">Email</label>
                <input type="email" name="email" id="email"
                    class="form-control @error('email') is-invalid @enderror" value="{{ old('email') }}">
                @error('email')
                    <span class="invalid-feedback" role="alert">
                        <strong>{{ $message }}</strong>
                    </span>
                @enderror
            </div>

            <div class="form-group">
                <label for="website">Website (Optional)</label>
                <input type="text" name="website" id="website"
                    class="form-control @error('website') is-invalid @enderror" value="{{ old('website') }}">
                @error('website')
                    <span class="invalid-feedback" role="alert">
                        <strong>{{ $message }}</strong>
                    </span>
                @enderror
            </div>

            <div class="form-group">
                <label for="address">Address</label>
                <textarea name="address" id="address" rows="3" class="form-control  @error('address') is-invalid @enderror">{{ old('address') }}</textarea>
                @error('address')
                    <span class="invalid-feedback" role="alert">
                        <strong>{{ $message }}</strong>
                    </span>
                @enderror
            </div>

            <div class="form-group">
                <label for="logo">Organization Logo (Optional)</label>
                <input type="file" name="photo" class="form-control @error('photo') is-invalid @enderror">
                @error('photo')
                    <span class="invalid-feedback d-block" role="alert">
                        <strong>{{ $message }}</strong>
                    </span>
                @enderror
            </div>

            <div class="form-group">
                <button type="submit" class="submit-btn">Submit Registration</button>
            </div>
        </form>
    </div>
@endsection