@extends('layouts.manage')

@section('content') 

@if ($message = Session::get('success'))
<x-alert type="success" message="{{ $message }}" />
@endif

<form method="post" action="{{ $action }}">
@csrf

@isset($city) 
    @method('PUT') 
@endisset 

@include('includes.errors') 

<div class="relative flex flex-col xl:flex-row justify-between gap-10 items-stretch">

    <div class="flex flex-col w-full bg-white rounded-3xl shadow-2xl p-14 md:p-10">
        <h1 class="text-3xl 2xl:text-4xl font-semibold leading-3 text-center p-2">City Details</h1>
        <hr class="w-24 mx-auto h2-line pb-5 mb-5" />
        <div class="flex flex-col py-3">
            <label class="font-medium p-1">City Name</label>
            <input type="text" name="city_name" value="{{ $city->city_name ?? '' }}" placeholder="Enter city name" />
        </div>
        <div class="flex flex-col py-3">
            <label class="font-medium flex flex-row p-1">
                <span class="p-1">City Alternate Names</span>
                <span class="p-2">
                    <div class="tooltip right">
                        <svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="question-circle" class="svg-inline--fa fa-question-circle fa-w-16" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M504 256c0 136.997-111.043 248-248 248S8 392.997 8 256C8 119.083 119.043 8 256 8s248 111.083 248 248zM262.655 90c-54.497 0-89.255 22.957-116.549 63.758-3.536 5.286-2.353 12.415 2.715 16.258l34.699 26.31c5.205 3.947 12.621 3.008 16.665-2.122 17.864-22.658 30.113-35.797 57.303-35.797 20.429 0 45.698 13.148 45.698 32.958 0 14.976-12.363 22.667-32.534 33.976C247.128 238.528 216 254.941 216 296v4c0 6.627 5.373 12 12 12h56c6.627 0 12-5.373 12-12v-1.333c0-28.462 83.186-29.647 83.186-106.667 0-58.002-60.165-102-116.531-102zM256 338c-25.365 0-46 20.635-46 46 0 25.364 20.635 46 46 46s46-20.636 46-46c0-25.365-20.635-46-46-46z"></path></svg>
                        <div class="tooltip-msg">
                            <div>Separate names by comma (,).</div>
                        </div>
                    </div>
                </span>
            </label>
            <input type="text" name="city_alternate_names" value="{{ $city->city_alternate_names ?? '' }}" placeholder="Enter alternate city names" />
        </div>
        <div class="flex flex-col py-3">
            <label class="font-medium p-1">Address for App</label>
            <input type="text" name="city_address" value="{{ $city->city_address ?? '' }}" placeholder="Enter address" />
        </div>
        <div class="flex flex-row py-3 gap-10 md:gap-5">
            <div class="flex flex-col w-1/2">
                <label class="font-medium p-1">Country</label>
                <div class="dropdown toggle-close inline-block relative">
                    <button class="inline-flex w-full text-left" type="button">
                        <span class="h-6 mr-7 whitespace-nowrap overflow-hidden overflow-ellipsis">
                        @isset($city)
                            @php
                                foreach($countries as $country)
                                {
                                    if($city->country === $country->code) {
                                        $city->country_name = $country->name;
                                    }
                                }
                            @endphp
                            {{ $city->country_name }}
                        @endisset
                        @empty($city)
                            Select Country
                        @endempty
                        </span>
                        <svg class="w-6 h-4 absolute top-0 right-2 m-3 pl-2 pointer-events-none" xmlns="http://www.w3.org/2000/svg" width="16.054" height="12.041" viewBox="0 0 16.054 12.041">
                            <path id="iconmonstr-arrow-80" d="M8.027,15.041,0,3H16.054Z" transform="translate(0 -3)" />
                        </svg>
                    </button>
                    <ul class="dropdown-content absolute w-full my-2 max-h-40 overflow-y-scroll">
                        @foreach ($countries as $country)
                        <li class="px-1.5 py-1 
                            @isset($city)
                                @if($city->country === $country->code)
                                selected
                                @endif
                            @endisset
                        " 
                        data-code="{{ $country->code }}" data-name="{{ $country->name }}">{{ $country->name }}</li>
                        @endforeach
                    </ul>
                    <input type="hidden" name="country" value="{{ $city->country ?? '' }}" />
                </div>
            </div>
            <div class="flex flex-col w-1/2">
                <label class="font-medium p-1">Language</label>
                <div class="dropdown toggle-close inline-block relative">
                    <button class="inline-flex w-full text-left" type="button">
                        <span class="h-6 mr-7 whitespace-nowrap overflow-hidden overflow-ellipsis">
                            @isset($city)
                                @php
                                    foreach($languages as $language)
                                    {
                                        if($city->language === $language->code) {
                                            $city->language_name = $language->name;
                                        }
                                    }
                                @endphp
                                {{ $city->language_name }}
                            @endisset
                            @empty($city)
                                Select Language
                            @endempty
                        </span>
                        <svg class="w-6 h-4 absolute top-0 right-2 m-3 pl-2 pointer-events-none" xmlns="http://www.w3.org/2000/svg" width="16.054" height="12.041" viewBox="0 0 16.054 12.041">
                            <path id="iconmonstr-arrow-80" d="M8.027,15.041,0,3H16.054Z" transform="translate(0 -3)" />
                        </svg>
                    </button>
                    <ul class="dropdown-content absolute w-full my-2 max-h-40 overflow-y-scroll">
                        @foreach ($languages as $language)
                        <li class="px-1.5 py-1
                            @isset($city)
                                @if($city->language === $language->code)
                                selected
                                @endif
                            @endisset
                        " data-code="{{ $language->code }}" data-name="{{ $language->name }}">{{ $language->name }}</li>
                        @endforeach
                    </ul>
                    <input type="hidden" name="language" value="{{ $city->language ?? '' }}" />
                </div>
            </div>
        </div>
    </div>

    <div class="flex flex-col w-full bg-white rounded-3xl shadow-2xl p-14 md:p-10">
        <h1 class="text-3xl 2xl:text-4xl font-semibold leading-3 text-center p-2">City Administration Details</h1>
        <hr class="w-24 mx-auto h2-line pb-5 mb-5" />
        <div class="flex flex-col py-3">
            <label class="font-medium p-1">Contact Person</label>
            <input type="text" name="contact_name" value="{{ $city->contact_name ?? '' }}" placeholder="Enter the name of the contact person" />
        </div>
        <div class="flex flex-col py-3">
            <label class="font-medium p-1">Billing Address</label>
            <input 
                type="text" 
                name="billing_address" 
                value="{{ $city->billing_address ?? '' }}" 
                placeholder="Enter address for billing"
            />
        </div>
        <div class="flex flex-col py-3">
            <label class="font-medium p-1">Contact Email</label>
            <input 
                type="text" 
                name="contact_email" 
                value="{{ $city->contact_email ?? '' }}" 
                placeholder="admin@gmail.com"
            />
        </div>
        <div class="flex flex-col py-3">
            <label class="font-medium p-1">Contact Number</label>
            <input 
                type="text" 
                name="contact_number" 
                value="{{ $city->contact_number ?? '' }}" 
                placeholder="0000-000-0000" 
                />
        </div>
    </div>

</div>

<div class="relative flex flex-row justify-between mt-10">
    <div class="flex flex-col 2xl:flex-row w-full bg-white rounded-3xl shadow-2xl p-14 md:p-10">
        <div class="flex flex-col xl:flex-row 2xl:flex-auto text-left items-center">
            <div class="flex flex-col lg:flex-row w-full xl:w-1/2 py-3">
                <label class="w-60 font-medium p-1">App Administrator's Name</label>
                <input 
                    class="w-full lg:w-2/3 xl:w-1/2 2xl:w-7/12" 
                    type="text" 
                    name="admin_name" 
                    value="{{ $city->admin_name ?? '' }}" 
                    placeholder="Enter app administrator name" 
                />
            </div>
            <div class="flex flex-col lg:flex-row w-full xl:w-1/2 py-3 2xl:pl-14">
                <label class="w-60 2xl:w-36 font-medium p-1 xl:pl-24 2xl:pl-0">Email Address</label>
                <input 
                    class="w-full lg:w-2/3 xl:w-1/2 2xl:w-7/12" 
                    type="text" 
                    name="admin_email" 
                    value="{{ $city->admin_email ?? '' }}" 
                    placeholder="admin@gmail.com" 
                />
            </div>
        </div>
        <div class="flex flex-col 2xl:flex-row 2xl:flex-initial text-right items-center py-3">
            <input class="btn" type="submit" value="Save" />
        </div>
    </div>
</div>

</form>

@stop