@extends('adminlte::page')

@section('title', 'Website Management')

@section('content_header')
    <h1>Edit Website</h1>
@stop

@section('content')
    <div class="card card-dark">
        <div class="card-header">
            <h3 class="card-title">Edit Website Details</h3>
        </div>
        <div class="card-body">
            <form id="updateWebsiteForm">
                @csrf
                <input type="hidden" name="website_id" id="website_id" value="{{ $userWebsite->id }}">

                <div class="form-group row">
                    <div class="col-md-6">
                        <x-adminlte-input label="First Name" name="first_name" id="first_name"
                            value="{{ $userWebsite->first_name }}" required />
                    </div>
                    <div class="col-md-6">
                        <x-adminlte-input label="Last Name" name="last_name" id="last_name"
                            value="{{ $userWebsite->last_name }}" required />
                    </div>
                </div>

                <div class="form-group row">
                    <div class="col-md-6">
                        <x-adminlte-input label="Email" name="email" id="email" value="{{ $userWebsite->email }}"
                            required />
                    </div>
                    <div class="col-md-6">
                        <x-adminlte-input label="Business Name" name="business_name" id="business_name"
                            value="{{ $userWebsite->business_name }}" required />
                    </div>
                </div>

                <div class="form-group row">
                    <div class="col-md-6">
                        <x-adminlte-input label="Business Email" name="business_email" id="business_email"
                            value="{{ $userWebsite->business_email }}" required />
                    </div>
                    <div class="col-md-6">
                        <x-adminlte-input label="Business Phone" name="business_phone" id="business_phone"
                            value="{{ $userWebsite->business_phone }}" required />
                    </div>
                </div>

                <div class="form-group row">
                    <div class="col-md-6">
                        <x-adminlte-input label="Business Address 1" name="business_address_1" id="business_address_1"
                            value="{{ $userWebsite->business_address_1 }}" required />
                    </div>
                    <div class="col-md-6">
                        <x-adminlte-input label="Business Address 2" name="business_address_2" id="business_address_2"
                            value="{{ $userWebsite->business_address_2 }}" />
                    </div>
                </div>

                <div class="form-group row">
                    <div class="col-md-6">
                        <x-adminlte-select label="Country" name="country" id="country">
                            <option selected disabled>Select Country</option>
                            @foreach ($countries as $country)
                                <option value="{{ $country->id }}" {{ $userWebsite->country == $country->id ? 'selected' : '' }}>
                                    {{ $country->name }}
                                </option>
                            @endforeach
                        </x-adminlte-select>
                    </div>
                    <div class="col-md-6">
                        <x-adminlte-select label="State" name="state" id="state">
                            <option selected disabled>Select State</option>
                            @foreach ($states as $state)
                            <option value="{{ $state->id }}" {{ $userWebsite->state == $state->id ? 'selected' : '' }}>
                                {{ $state->name }}
                            </option>
                            @endforeach
                        </x-adminlte-select>
                        {{-- <x-adminlte-input label="State" name="state" id="state" value="{{ $userWebsite->state }}" /> --}}
                    </div>
                </div>
                <div class="form-group row">
                    <div class="col-md-6">
                        <x-adminlte-select label="City" name="city" id="city">
                            <option selected disabled>Select City</option>
                            @foreach ($cities as $city)
                            <option value="{{ $city->id }}" {{ $userWebsite->city == $city->id ? 'selected' : '' }}>
                                {{ $city->name }}
                            </option>
                            @endforeach
                        </x-adminlte-select>
                        {{-- <x-adminlte-input label="City" name="city" id="city" value="{{ $userWebsite->city }}" /> --}}
                    </div>
                    <div class="col-md-6">
                        <x-adminlte-input label="Street" name="street" id="street"
                            value="{{ $userWebsite->street }}" />
                    </div>
                </div>
                <div class="form-group row">
                    <div class="col-md-6">
                        <x-adminlte-input label="Zip Code" name="zip_code" id="zip_code"
                            value="{{ $userWebsite->zip_code }}" />
                    </div>
                    <div class="col-md-6">
                        <x-adminlte-input label="Domain Name" name="domain_name" id="domain_name"
                            value="{{ $userWebsite->domain_name }}" />
                    </div>
                </div>
                @php
                    // Ensure the variable is always an array
                    $socialUrls = is_string($userWebsite->social_urls)
                        ? json_decode($userWebsite->social_urls, true)
                        : (is_array($userWebsite->social_urls)
                            ? $userWebsite->social_urls
                            : []);
                @endphp
                <div class="form-group row">
                    <div class="col-md-6">
                        <x-adminlte-input label="Subdomain Preference" name="subdomain_preference" id="subdomain_preference"
                            value="{{ $userWebsite->subdomain_preference }}" />
                    </div>
                    <div class="col-md-6">
                        <label for="social_urls">Social URLs</label>
                        @foreach ($socialUrls as $url)
                            <input type="text" class="form-control mb-2" name="social_urls[]"
                                value="{{ $url }}" placeholder="Enter Social URL">
                        @endforeach
                    </div>
                </div>
                <div class="form-group row">
                    {{-- Handling Multiple Pages --}}
                    @php
                        $pages = is_string($userWebsite->pages)
                            ? json_decode($userWebsite->pages, true)
                            : (is_array($userWebsite->pages)
                                ? $userWebsite->pages
                                : []);
                    @endphp
                    <div class="col-md-6">
                        <label for="pages">Pages</label>
                        @foreach ($pages as $page)
                            <input type="text" class="form-control mb-2" name="pages[]" value="{{ $page }}"
                                placeholder="Enter Page Name">
                        @endforeach
                    </div>
                    <div class="col-md-6">
                        <x-adminlte-input label="Logo URL" name="logo" id="logo" type="file"
                            value="" />
                        <img src="{{ asset('storage/' . $userWebsite->logo) }}" width="35" height="35"
                            alt="logo" />
                    </div>
                </div>
                {{-- Handling Multiple Services --}}
                @php
                    $serviceNames = is_string($userWebsite->services_name)
                        ? json_decode($userWebsite->services_name, true)
                        : (is_array($userWebsite->services_name)
                            ? $userWebsite->services_name
                            : []);
                    $serviceDescriptions = is_string($userWebsite->services_description)
                        ? json_decode($userWebsite->services_description, true)
                        : (is_array($userWebsite->services_description)
                            ? $userWebsite->services_description
                            : []);
                @endphp
                <div class="form-group row">
                    {{-- Handling Multiple Media URLs --}}
                    @php
                        $mediaUrls = is_string($userWebsite->media)
                            ? json_decode($userWebsite->media, true)
                            : (is_array($userWebsite->media)
                                ? $userWebsite->media
                                : []);
                    @endphp
                    <div class="col-md-6">
                        <label for="media">Media URLs</label>
                        @foreach ($mediaUrls as $media)
                            <input type="file" class="form-control mb-2" name="media[]" value=""
                                placeholder="Enter Media URL" multiple>
                            <img src="{{ asset('storage/' . $media) }}" width="35" height="35" alt="media" />
                        @endforeach
                    </div>
                    <div class="col-md-6">
                        <label for="services_name">Services Name</label>
                        @foreach ($serviceNames as $service)
                            <input type="text" class="form-control mb-2" name="services_name[]"
                                value="{{ $service }}" placeholder="Enter Service Name">
                        @endforeach
                    </div>
                </div>
                <div class="form-group row">
                    <div class="col-md-6">
                        <label for="services_description">Services Description</label>
                        @foreach ($serviceDescriptions as $desc)
                            <textarea class="form-control mb-2" rows="3" name="services_description[]"
                                placeholder="Enter Service Description">{{ $desc }}</textarea>
                        @endforeach
                    </div>
                    <div class="col-md-6">
                        <x-adminlte-textarea label="Business Paragraph" rows="3" name="business_paragraph"
                            id="business_paragraph">{{ $userWebsite->business_paragraph }}</x-adminlte-textarea>
                    </div>
                </div>

                <div class="form-group row">
                    <div class="col-md-6">
                        <x-adminlte-input label="Primary Color" name="primary_color" id="primary_color"
                            value="{{ $userWebsite->primary_color }}" />
                    </div>
                    <div class="col-md-6">
                        <x-adminlte-input label="Secondary Color" name="secondary_color" id="secondary_color"
                            value="{{ $userWebsite->secondary_color }}" />
                    </div>
                </div>
                <div class="form-group row">
                    <div class="col-md-6">
                        <x-adminlte-input label="Highlight Color" name="highlight_color" id="highlight_color"
                            value="{{ $userWebsite->highlight_color }}" />
                    </div>
                    <div class="col-md-6">
                        <label for="status">Status</label>
                        <select class="form-control" name="status" id="status">
                            @foreach ([1 => 'Draft', 2 => 'Submitted', 3 => 'Unpublished', 4 => 'Published'] as $key => $value)
                                <option value="{{ $key }}" {{ $userWebsite->status == $key ? 'selected' : '' }}>
                                    {{ $value }}</option>
                            @endforeach
                        </select>
                    </div>
                </div>
                <div class="form-group">
                    <x-adminlte-textarea label="Instructions" name="instructions"
                        id="instructions">{{ $userWebsite->instructions }}</x-adminlte-textarea>
                </div>
                <div class="form-group row">
                    <div class="col-md-12 text-center">
                        <a href="{{ route('admin.users.website.index') }}" class="btn button-primary">Back</a>
                        <button type="submit" class="btn button-primary">Update</button>
                    </div>
                </div>

            </form>
        </div>
    </div>
@stop

@section('js')
    <script>
        $(document).ready(function() {
            $("#updateWebsiteForm").on("submit", function(e) {
                e.preventDefault();

                let formData = $(this).serialize();
                let websiteId = $("#website_id").val();

                $.ajax({
                    url: "{{ route('admin.users.website.update', '') }}/" + websiteId,
                    type: "POST",
                    data: formData,
                    success: function(response) {
                        if (response.success) {
                            alert(response.message);
                            window.location.href = "{{ route('admin.users.website.index') }}";
                        } else {
                            alert(response.message);
                        }
                    },
                    error: function(xhr) {
                        alert("An error occurred while updating.");
                    }
                });
            });
        });
        $(document).ready(function() {
            $('#country').change(function() {
                let countryId = $(this).val();
                console.log(countryId);
                
                $('#state').html('<option selected disabled>Loading...</option>');
                $('#city').html('<option selected disabled>Select City</option>');

                $.ajax({
                    url: '{{ route('admin.get.states') }}',
                    type: 'GET',
                    data: { country_id: countryId },
                    success: function(data) {
                        let stateOptions = '<option selected disabled>Select State</option>';
                        data.forEach(state => {
                            stateOptions += `<option value="${state.id}">${state.name}</option>`;
                        });
                        $('#state').html(stateOptions);
                    }
                });
            });

            $('#state').change(function() {
                let stateId = $(this).val();
                $('#city').html('<option selected disabled>Loading...</option>');

                $.ajax({
                    url: '{{ route('admin.get.cities') }}',
                    type: 'GET',
                    data: { state_id: stateId },
                    success: function(data) {
                        let cityOptions = '<option selected disabled>Select City</option>';
                        data.forEach(city => {
                            cityOptions += `<option value="${city.id}">${city.name}</option>`;
                        });
                        $('#city').html(cityOptions);
                    }
                });
            });
        });

    </script>
@stop