@extends('layouts.manage')

@section('content') 

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

<form method="post" action="{{ $action }}" enctype="multipart/form-data">
@csrf

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

@include('includes.errors') 

<div class="relative flex flex-col xl:flex-row justify-between gap-10">
    <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">
        @if(Route::currentRouteName() === 'city.transportCreate')
            Create New Transport Options
        @else
            Edit Transport Options
        @endif
        </h1>
        <hr class="w-24 mx-auto h2-line pb-5 mb-5" />
        @isset($transport->preset)
        <div class="flex flex-row">
            <div class="w-1/5 p-3"></div>
            <div class="preset p-3 w-1/5 text-center font-medium">Preset</div>
            <div class="w-3/5 p-3"></div>
        </div>
        @endisset
        <div class="flex flex-row">
            <div class="w-1/5 p-3 font-medium">Transport Name</div>
            @isset($transport->preset)
            <div class="preset w-1/5 p-3 text-center">{{ $transport->preset->transport_preset_name ?? '' }}</div>
            @endisset
            <div class="w-3/5 p-3">
                <input class="w-full" type="text" name="transport_name" value="{{ $transport->transport_name ?? '' }}" placeholder="Enter name" />
            </div>
        </div>
        <div class="flex flex-row">
            <div class="w-1/5 p-3">
                <span class="font-medium">Transport Logo (Unselected)</span><br />
                <span class="text-sm">(Image should be 102 x 61 px)</span>
            </div>
            @isset($transport->preset)
            <div class="preset w-1/5 p-3 text-center flex flex-wrap content-center">
                <img class="mx-auto" src="{{ $transport->preset->transport_preset_logo ?? '' }}" />
            </div>
            @endisset
            <div class="w-3/5 p-3 flex flex-wrap content-center">
                @isset($transport->transport_logo) 
                <div class="mx-3 flex flex-wrap content-center">
                    <img class="prev_logo mx-auto" src="{{ $transport->transport_logo ?? '' }}" />
                </div>
                @endisset 
                <div class="mx-3 flex flex-wrap content-center">
                    <x-upload-image button="Upload" field="transport_logo" />
                </div>
            </div>
        </div>
        <div class="flex flex-row">
            <div class="w-1/5 p-3">
                <span class="font-medium">Transport Logo (Selected)</span><br />
                <span class="text-sm">(Image should be 102 x 61 px)</span>
            </div>
            @isset($transport->preset)
            <div class="preset w-1/5 p-3 text-center flex flex-wrap content-center">
                <img class="mx-auto" src="{{ $transport->preset->transport_preset_logo_selected ?? '' }}" />
            </div>
            @endisset
            <div class="w-3/5 p-3 flex flex-wrap content-center">
                @isset($transport->transport_logo_selected) 
                <div class="mx-3 flex flex-wrap content-center">
                    <img class="prev_logo mx-auto" src="{{ $transport->transport_logo_selected ?? '' }}" />
                </div>
                @endisset 
                <div class="mx-3 flex flex-wrap content-center">
                    <x-upload-image button="Upload" field="transport_logo_selected" />
                </div>
            </div>
        </div>
        <div class="flex flex-row">
            <div class="w-1/5 p-3 font-medium">Transport Score</div>
            @isset($transport->preset)
            <div class="preset w-1/5 p-3 text-center">{{ $transport->preset->transport_preset_score ?? '' }}</div>
            @endisset
            <div class="w-3/5 p-3">
                <input class="w-full" type="number" name="transport_score" value="{{ $transport->transport_score ?? '' }}" placeholder="Enter score" />
            </div>
        </div>
        <div class="flex flex-row">
            <div class="w-1/5 p-3 font-medium">Transport Type</div>
            @isset($transport->preset) 
            <div class="preset w-1/5 p-3 text-center">
                @isset($transport->preset->transport_preset_type)
                @php
                    foreach($transport_types as $transport_type)
                    {
                        if($transport->preset->transport_preset_type === $transport_type->code) {
                            $transport->preset->transport_preset_type_name = $transport_type->name;
                        }
                    }
                @endphp
                {{ $transport->preset->transport_preset_type_name ?? '' }}
                @endisset
            </div>
            @endisset
            <div class="w-3/5 p-3">
                <div class="w-full 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($transport)
                                @php
                                    foreach($transport_types as $transport_type)
                                    {
                                        if($transport->transport_type === $transport_type->code) {
                                            $transport->transport_type_name = $transport_type->name;
                                        }
                                    }
                                @endphp
                                {{ $transport->transport_type_name }}
                            @endisset
                            @empty($transport)
                                Select Transport Type
                            @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 ($transport_types as $transport_type)
                        <li class="px-1.5 py-1
                            @isset($transport)
                                @if($transport->transport_type === $transport_type->code)
                                selected
                                @endif
                            @endisset
                        " data-code="{{ $transport_type->code }}" data-name="{{ $transport_type->name }}">{{ $transport_type->name }}</li>
                        @endforeach
                    </ul>
                    <input type="hidden" name="transport_type" value="{{ $transport->transport_type ?? '' }}" />
                </div>
            </div>
        </div>
        <div class="flex flex-row">
            <div class="w-1/5 p-3 font-medium">Transport Level</div>
            @isset($transport->preset) 
            <div class="preset w-1/5 p-3 text-center">
                @isset($transport->preset->transport_preset_level)
                @php
                    foreach($transports_level as $transport_level)
                    {
                        if($transport->preset->transport_preset_level === $transport_level->transport_level_id) {
                            $transport->preset->transport_preset_level_name = $transport_level->transport_level_name;
                        }
                    }
                @endphp
                {{ $transport->preset->transport_preset_level_name ?? '' }}
                @endisset
            </div>
            @endisset
            <div class="w-3/5 p-3">
                <div class="w-full 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($transport)
                                @php
                                    foreach($transports_level as $transport_level)
                                    {
                                        if($transport->transport_level === $transport_level->transport_level_id) {
                                            $transport->transport_level_name = $transport_level->transport_level_name;
                                        }
                                    }
                                @endphp
                                {{ $transport->transport_level_name }}
                            @endisset
                            @empty($transport)
                                Select Transport Level
                            @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 ($transports_level as $transport_level)
                        <li class="px-1.5 py-1
                            @isset($transport)
                                @if($transport->transport_level === $transport_level->transport_level_id)
                                selected
                                @endif
                            @endisset
                        " data-code="{{ $transport_level->transport_level_id }}" data-name="{{ $transport_level->transport_level_name }}">{{ $transport_level->transport_level_name }}</li>
                        @endforeach
                    </ul>
                    <input type="hidden" name="transport_level" value="{{ $transport->transport_level ?? '' }}" />
                </div>
            </div>
        </div>
        @isset($transport) 
        <div class="flex flex-row">
            <div class="w-1/5 p-3 font-medium">Enable/ Disable</div>
            @isset($transport->preset) 
            <div class="preset w-1/5 p-3 text-center"></div>
            @endisset
            <div class="w-3/5 p-3">
                <label for="transport" class="flex items-center cursor-pointer">
                    <div class="relative">
                        <input class="hidden" id="transport" name="transport_active" type="checkbox" 
                            @isset($transport) 
                                @if($transport->transport_active == 1) 
                                    checked="checked"
                                @endif
                            @endisset
                        />
                        <div class="toggle-line w-12 h-7 bg-gray-400 rounded-full shadow-inner"></div>
                        <div class="toggle-dot absolute w-5 h-5 bg-white rounded-full shadow "></div>
                    </div>
                    <div class="ml-3 text-gray-700 font-medium"></div>
                </label>
            </div>
        </div>
        @endisset
        <div class="flex flex-row text-center p-3">
            <input class="mx-auto btn" type="submit" value="Save" />
        </div>
    </div>
</div>

</form>

@stop