@extends('layouts.app')

@section('content')
    @php
        $translationLanguages = $appLanguages->filter(fn($language) => filled($language->code))->values();
    @endphp

    <link href="{{ asset('assets/plugins/bs-stepper/css/bs-stepper.css') }}" rel="stylesheet" />

    <div class="page-wrapper">
        <div class="page-content">

            @include('includes.page_header', [
                'heading' => 'Partner Management',
                'action' => 'Create Partner',
                'url' => route('admin.partners.index'),
            ])

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

            <div id="partnerStepper" class="bs-stepper">
                <div class="card">
                    <div class="card-header bg-transparent border-bottom">
                        <div class="d-lg-flex flex-lg-row align-items-lg-center justify-content-lg-between" role="tablist">
                            <div class="step" data-target="#step-general">
                                <button type="button" class="step-trigger" role="tab" id="stepperTrigger1" aria-controls="step-general">
                                    <div class="bs-stepper-circle"><i class='bx bx-user fs-4'></i></div>
                                    <div class="text-start ms-2">
                                        <h5 class="mb-0 steper-title">General</h5>
                                        <p class="mb-0 steper-sub-title">Basic Information</p>
                                    </div>
                                </button>
                            </div>
                            <div class="bs-stepper-line"></div>
                            <div class="step" data-target="#step-address">
                                <button type="button" class="step-trigger" role="tab" id="stepperTrigger2" aria-controls="step-address">
                                    <div class="bs-stepper-circle"><i class='bx bx-map fs-4'></i></div>
                                    <div class="text-start ms-2">
                                        <h5 class="mb-0 steper-title">Address</h5>
                                        <p class="mb-0 steper-sub-title">Location Details</p>
                                    </div>
                                </button>
                            </div>
                            <div class="bs-stepper-line"></div>
                            <div class="step" data-target="#step-gallery">
                                <button type="button" class="step-trigger" role="tab" id="stepperTrigger3" aria-controls="step-gallery">
                                    <div class="bs-stepper-circle"><i class='bx bx-image fs-4'></i></div>
                                    <div class="text-start ms-2">
                                        <h5 class="mb-0 steper-title">Image Gallery</h5>
                                        <p class="mb-0 steper-sub-title">Photos & Gallery</p>
                                    </div>
                                </button>
                            </div>
                        </div>
                    </div>
                    <div class="card-body p-4">
                        <div class="bs-stepper-content">
                            <form action="{{ route('admin.partners.store') }}" method="POST" enctype="multipart/form-data">
                                @csrf

                                <!-- STEP 1: GENERAL -->
                                <div id="step-general" role="tabpanel" class="bs-stepper-pane fade" aria-labelledby="stepperTrigger1">
                                    <h5 class="mb-3">General Information</h5>
                                    <div class="row g-3">
                                        <div class="col-md-6">
                                            <label class="form-label">Name</label>
                                            <input type="text" name="name" class="form-control @error('name') is-invalid @enderror"
                                                value="{{ old('name') }}" required>
                                            @error('name')
                                                <div class="invalid-feedback">{{ $message }}</div>
                                            @enderror
                                        </div>

                                        <div class="col-md-6">
                                            <label class="form-label">Email</label>
                                            <input type="email" name="email" class="form-control @error('email') is-invalid @enderror"
                                                value="{{ old('email') }}" required>
                                            @error('email')
                                                <div class="invalid-feedback">{{ $message }}</div>
                                            @enderror
                                        </div>

                                        <div class="col-md-3">
                                            <label class="form-label">Country Code</label>
                                            <select name="phone_country_code" id="phone_country_code"
                                                class="form-select @error('phone_country_code') is-invalid @enderror" required>
                                                <option value="">Select</option>
                                                @foreach ($countries as $country)
                                                    @php $code = $country->phonecode ? '+' . $country->phonecode : null; @endphp
                                                    @if ($code)
                                                        <option value="{{ $code }}"
                                                            {{ old('phone_country_code') === $code ? 'selected' : '' }}>
                                                            {{ $country->name }} ({{ $code }})
                                                        </option>
                                                    @endif
                                                @endforeach
                                            </select>
                                            @error('phone_country_code')
                                                <div class="invalid-feedback">{{ $message }}</div>
                                            @enderror
                                        </div>

                                        <div class="col-md-3">
                                            <label class="form-label">Phone No</label>
                                            <input type="text" name="phone_no"
                                                class="form-control @error('phone_no') is-invalid @enderror" value="{{ old('phone_no') }}"
                                                required>
                                            @error('phone_no')
                                                <div class="invalid-feedback">{{ $message }}</div>
                                            @enderror
                                        </div>

                                        <div class="col-md-3">
                                            <label class="form-label">Password</label>
                                            <input type="password" name="password"
                                                class="form-control @error('password') is-invalid @enderror" required>
                                            @error('password')
                                                <div class="invalid-feedback">{{ $message }}</div>
                                            @enderror
                                        </div>

                                        <div class="col-md-3">
                                            <label class="form-label">Confirm Password</label>
                                            <input type="password" name="password_confirmation"
                                                class="form-control @error('password_confirmation') is-invalid @enderror" required>
                                            @error('password_confirmation')
                                                <div class="invalid-feedback">{{ $message }}</div>
                                            @enderror
                                        </div>

                                        <div class="col-md-4">
                                            <label class="form-label">Gender</label>
                                            <select name="gender" class="form-select @error('gender') is-invalid @enderror">
                                                <option value="">Select</option>
                                                <option value="male" {{ old('gender') === 'male' ? 'selected' : '' }}>Male</option>
                                                <option value="female" {{ old('gender') === 'female' ? 'selected' : '' }}>Female</option>
                                                <option value="other" {{ old('gender') === 'other' ? 'selected' : '' }}>Other</option>
                                            </select>
                                            @error('gender')
                                                <div class="invalid-feedback">{{ $message }}</div>
                                            @enderror
                                        </div>

                                        <div class="col-md-4">
                                            <label class="form-label">Date of Birth</label>
                                            <input type="date" name="date_of_birth"
                                                class="form-control @error('date_of_birth') is-invalid @enderror"
                                                value="{{ old('date_of_birth') }}">
                                            @error('date_of_birth')
                                                <div class="invalid-feedback">{{ $message }}</div>
                                            @enderror
                                        </div>

                                        <div class="col-md-4">
                                            <label class="form-label">Availability</label>
                                            <select name="availability_status"
                                                class="form-select @error('availability_status') is-invalid @enderror">
                                                <option value="unavailable"
                                                    {{ old('availability_status') === 'unavailable' ? 'selected' : '' }}>Unavailable
                                                </option>
                                                <option value="available"
                                                    {{ old('availability_status') === 'available' ? 'selected' : '' }}>Available</option>
                                                <option value="in_meeting"
                                                    {{ old('availability_status') === 'in_meeting' ? 'selected' : '' }}>In Meeting</option>
                                            </select>
                                            @error('availability_status')
                                                <div class="invalid-feedback">{{ $message }}</div>
                                            @enderror
                                        </div>

                                        <div class="col-md-6">
                                            <label class="form-label">Hourly Price</label>
                                            <input type="number" step="0.01" name="pricing_hourly"
                                                class="form-control @error('pricing_hourly') is-invalid @enderror"
                                                value="{{ old('pricing_hourly') }}" placeholder="Enter hourly price">
                                            @error('pricing_hourly')
                                                <div class="invalid-feedback">{{ $message }}</div>
                                            @enderror
                                        </div>

                                        <div class="col-md-6">
                                            <label class="form-label">Minimum Booking Hours</label>
                                            <input type="number" name="minimum_booking_hours"
                                                class="form-control @error('minimum_booking_hours') is-invalid @enderror"
                                                value="{{ old('minimum_booking_hours') }}" placeholder="Enter minimum booking hours">
                                            @error('minimum_booking_hours')
                                                <div class="invalid-feedback">{{ $message }}</div>
                                            @enderror
                                        </div>

                                        <div class="col-md-12">
                                            <label class="form-label">Languages</label>
                                            <select name="languages[]" id="languages"
                                                class="form-select @error('languages') is-invalid @enderror @error('languages.*') is-invalid @enderror"
                                                multiple>
                                                @foreach ($languages as $language)
                                                    <option value="{{ $language->id }}"
                                                        {{ in_array($language->id, old('languages', [])) ? 'selected' : '' }}>
                                                        {{ $language->name }}
                                                    </option>
                                                @endforeach
                                            </select>
                                            @error('languages')
                                                <div class="invalid-feedback d-block">{{ $message }}</div>
                                            @enderror
                                            @error('languages.*')
                                                <div class="invalid-feedback d-block">{{ $message }}</div>
                                            @enderror
                                        </div>

                                        <div class="col-md-12">
                                            <label class="form-label">Bio</label>
                                            <textarea name="bio" class="form-control @error('bio') is-invalid @enderror" rows="4">{{ old('bio') }}</textarea>
                                            @error('bio')
                                                <div class="invalid-feedback">{{ $message }}</div>
                                            @enderror
                                        </div>

                                        @if ($translationLanguages->count())
                                            <div class="col-12">
                                                <div class="border rounded p-3">
                                                    <h6 class="mb-1">Translations</h6>
                                                    <p class="text-muted mb-3 small">Manual translation fields. Default locale:
                                                        <strong>{{ strtoupper(setting('default_translation_locale', 'en')) }}</strong>.</p>
                                                    @include('includes.partial.auto_translate.create_toggle')

                                                    <ul class="nav nav-tabs nav-primary flex-nowrap overflow-auto mb-3" role="tablist">
                                                        @foreach ($translationLanguages as $language)
                                                            <li class="nav-item" role="presentation">
                                                                <button class="nav-link {{ $loop->first ? 'active' : '' }}"
                                                                    data-bs-toggle="tab"
                                                                    data-bs-target="#create-template-translation-{{ $language->code }}"
                                                                    type="button" role="tab">
                                                                    {{ strtoupper($language->code) }}
                                                                </button>
                                                            </li>
                                                        @endforeach
                                                    </ul>

                                                    <div class="tab-content">
                                                        @foreach ($translationLanguages as $language)
                                                            @php
                                                                $translationLanguageName =
                                                                    $language->language->name ??
                                                                    ($language->data['name'] ?? strtoupper($language->code));
                                                            @endphp
                                                            <div class="tab-pane fade {{ $loop->first ? 'show active' : '' }}"
                                                                id="create-template-translation-{{ $language->code }}" role="tabpanel">
                                                                <div class="row g-3">
                                                                    <div class="col-md-6 translation-subject-container">
                                                                        <label class="form-label">
                                                                            {{ $translationLanguageName }} Name
                                                                            @if ($language->code === setting('default_translation_locale', 'en'))
                                                                                <span
                                                                                    class="badge bg-light text-dark border ms-1">Default</span>
                                                                            @endif
                                                                        </label>
                                                                        <input type="text"
                                                                            name="translations[{{ $language->code }}][name]"
                                                                            class="form-control @error('translations.' . $language->code . '.name') is-invalid @enderror"
                                                                            value="{{ old('translations.' . $language->code . '.name') }}">
                                                                        @error('translations.' . $language->code . '.name')
                                                                            <div class="invalid-feedback">{{ $message }}</div>
                                                                        @enderror
                                                                    </div>

                                                                    <div class="col-12">
                                                                        <label class="form-label">{{ $translationLanguageName }} Bio</label>
                                                                        <textarea name="translations[{{ $language->code }}][bio]" rows="3"
                                                                            class="form-control @error('translations.' . $language->code . '.bio') is-invalid @enderror">{{ old('translations.' . $language->code . '.bio') }}</textarea>
                                                                        @error('translations.' . $language->code . '.bio')
                                                                            <div class="invalid-feedback">{{ $message }}</div>
                                                                        @enderror
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        @endforeach
                                                    </div>
                                                </div>
                                            </div>
                                        @endif

                                        <div class="col-12 mt-4">
                                            <div class="d-flex align-items-center justify-content-end gap-3">
                                                <button type="button" class="btn btn-primary px-4" onclick="partnerStepper.next()">Next<i class='bx bx-right-arrow-alt ms-2'></i></button>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <!-- STEP 2: ADDRESS -->
                                <div id="step-address" role="tabpanel" class="bs-stepper-pane fade" aria-labelledby="stepperTrigger2">
                                    <h5 class="mb-3">Address & Location Information</h5>
                                    <div class="row g-3">
                                        <div class="col-md-4">
                                            <label class="form-label">Country</label>
                                            <select name="country_id" class="form-select @error('country_id') is-invalid @enderror">
                                                <option value="">Select Country</option>
                                                @foreach ($countries as $country)
                                                    <option value="{{ $country->id }}"
                                                        {{ (string) old('country_id') === (string) $country->id ? 'selected' : '' }}>
                                                        {{ $country->name }}
                                                    </option>
                                                @endforeach
                                            </select>
                                            @error('country_id')
                                                <div class="invalid-feedback">{{ $message }}</div>
                                            @enderror
                                        </div>

                                        <div class="col-md-4">
                                            <label class="form-label">State</label>
                                            <select name="state_id" id="state_id"
                                                class="form-select @error('state_id') is-invalid @enderror">
                                                <option value="">Select State</option>
                                            </select>
                                            @error('state_id')
                                                <div class="invalid-feedback">{{ $message }}</div>
                                            @enderror
                                        </div>

                                        <div class="col-md-4">
                                            <label class="form-label">City</label>
                                            <select name="city_id" id="city_id"
                                                class="form-select @error('city_id') is-invalid @enderror">
                                                <option value="">Select City</option>
                                            </select>
                                            @error('city_id')
                                                <div class="invalid-feedback">{{ $message }}</div>
                                            @enderror
                                        </div>

                                        <div class="col-md-12">
                                            <label class="form-label">Address</label>
                                            <textarea name="address" class="form-control @error('address') is-invalid @enderror" rows="3">{{ old('address') }}</textarea>
                                            @error('address')
                                                <div class="invalid-feedback">{{ $message }}</div>
                                            @enderror
                                        </div>

                                        <div class="col-md-4">
                                            <label class="form-label">Current Latitude</label>
                                            <input type="text" name="current_latitude"
                                                class="form-control @error('current_latitude') is-invalid @enderror"
                                                value="{{ old('current_latitude') }}">
                                            @error('current_latitude')
                                                <div class="invalid-feedback">{{ $message }}</div>
                                            @enderror
                                        </div>

                                        <div class="col-md-4">
                                            <label class="form-label">Current Longitude</label>
                                            <input type="text" name="current_longitude"
                                                class="form-control @error('current_longitude') is-invalid @enderror"
                                                value="{{ old('current_longitude') }}">
                                            @error('current_longitude')
                                                <div class="invalid-feedback">{{ $message }}</div>
                                            @enderror
                                        </div>

                                        <div class="col-md-4">
                                            <label class="form-label">Pin Code</label>
                                            <input type="text" name="pin_code"
                                                class="form-control @error('pin_code') is-invalid @enderror"
                                                value="{{ old('pin_code') }}">
                                            @error('pin_code')
                                                <div class="invalid-feedback">{{ $message }}</div>
                                            @enderror
                                        </div>

                                        <div class="col-12 mt-4">
                                            <div class="d-flex align-items-center justify-content-between gap-3">
                                                <button type="button" class="btn btn-outline-secondary px-4" onclick="partnerStepper.previous()"><i class='bx bx-left-arrow-alt me-2'></i>Previous</button>
                                                <button type="button" class="btn btn-primary px-4" onclick="partnerStepper.next()">Next<i class='bx bx-right-arrow-alt ms-2'></i></button>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <!-- STEP 3: IMAGE GALLERY -->
                                <div id="step-gallery" role="tabpanel" class="bs-stepper-pane fade" aria-labelledby="stepperTrigger3">
                                    <h5 class="mb-3">Image & Gallery Uploads</h5>
                                    <div class="row g-3">
                                        <div class="col-md-6">
                                            <label class="form-label">Profile Image</label>
                                            <input type="file" id="profile-image" name="profile_image"
                                                class="form-control @error('profile_image') is-invalid @enderror" accept="image/*">
                                            @error('profile_image')
                                                <div class="invalid-feedback">{{ $message }}</div>
                                            @enderror
                                        </div>

                                        <div class="col-md-6">
                                            <label class="form-label">Cover Photo</label>
                                            <input type="file" id="cover-image" name="cover_image"
                                                class="form-control @error('cover_image') is-invalid @enderror" accept="image/*">
                                            @error('cover_image')
                                                <div class="invalid-feedback">{{ $message }}</div>
                                            @enderror
                                        </div>

                                        <div class="col-md-12">
                                            <label class="form-label">Gallery Images</label>
                                            <input type="file" id="gallery-uploadify" name="gallery[]"
                                                class="form-control @error('gallery') is-invalid @enderror @error('gallery.*') is-invalid @enderror"
                                                accept="image/*" multiple>
                                            @error('gallery')
                                                <div class="invalid-feedback d-block">{{ $message }}</div>
                                            @enderror
                                            @error('gallery.*')
                                                <div class="invalid-feedback d-block">{{ $message }}</div>
                                            @enderror
                                        </div>

                                        <div class="col-12 mt-4">
                                            <div class="d-flex align-items-center justify-content-between gap-3">
                                                <button type="button" class="btn btn-outline-secondary px-4" onclick="partnerStepper.previous()"><i class='bx bx-left-arrow-alt me-2'></i>Previous</button>
                                                <div class="d-flex align-items-center gap-3">
                                                    <button type="submit" class="btn btn-primary px-4"><i class="bx bx-save me-1"></i>Create Partner</button>
                                                    <a href="{{ route('admin.partners.index') }}" class="btn btn-light px-4">Back</a>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                            </form>
                        </div>
                    </div>
                </div>
            </div>

        </div>
    </div>

    @include('includes.commonjs')

    <script src="{{ asset('assets/plugins/bs-stepper/js/bs-stepper.min.js') }}"></script>
    <script>
        var partnerStepper;
        document.addEventListener('DOMContentLoaded', function () {
            var stepperEl = document.querySelector('#partnerStepper');
            if (stepperEl) {
                partnerStepper = new Stepper(stepperEl, {
                    linear: false,
                    animation: true
                });
            }

            if ($.fn.imageuploadify) {
                $('#gallery-uploadify').imageuploadify();
                $('#gallery-uploadify').closest('form').off('submit');
            }

            if (typeof FilePond !== 'undefined') {
                if (typeof FilePondPluginImagePreview !== 'undefined') {
                    FilePond.registerPlugin(FilePondPluginImagePreview);
                }

                const profileInput = document.querySelector('#profile-image');
                if (profileInput) {
                    FilePond.create(profileInput, {
                        allowMultiple: false,
                        storeAsFile: true,
                        allowImagePreview: true,
                        credits: false
                    });
                }

                const coverInput = document.querySelector('#cover-image');
                if (coverInput) {
                    FilePond.create(coverInput, {
                        allowMultiple: false,
                        storeAsFile: true,
                        allowImagePreview: true,
                        credits: false
                    });
                }
            }
        });
    </script>
@endsection