@extends('layouts.manage')

@section('content') 

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

<form method="post" action="{{ $action }}">
@csrf
@method('PUT') 

<input type="hidden" name="transport_id" />
<input type="hidden" name="transport_active" />
</form>

<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">Transport Options</h1>
        <div class="text-right font-bold -mt-6"><a href="{{ route('city.transportCreate', $city->city_id) }}">+ Add New Transport</a></div>
        <hr class="w-24 mx-auto h2-line pb-5 mb-5" />
        @if($transports->isEmpty())
        <p class="mx-auto text-center">
            <strong>There are currently no Transports available.</strong><br />
            You can <a href="#" class="preset-transports font-bold">use our preset transports</a> or you can <a href="{{ route('city.transportCreate', $city->city_id) }}" class="font-bold">add your own</a>.
        </p>
        <x-modal name="preset-transports" title="Preset Transport Options" content="Do you want to continue using our preset transport options?" link="{{ route('city.transportPreset', $city->city_id) }}" />
        @else
        <div class="flex flex-row py-3 text-center">
            <div class="rounded-l-lg table-head w-full font-semibold p-2">Transport Method</div>
            <div class="table-head w-full font-semibold p-2">Enable/ Disable</div>
            <div class="table-head w-full font-semibold p-2">Transport Logo (Unselected)</div>
            <div class="table-head w-full font-semibold p-2">Transport Logo (Selected)</div>
            <div class="table-head w-full font-semibold p-2">Suggested Score</div>
            <div class="table-head w-full font-semibold p-2">Transport Type</div>
            <div class="table-head w-full font-semibold p-2">Carbon Level</div>
            <div class="rounded-r-lg table-head w-full font-semibold p-2"></div>
        </div>

        @foreach ($transports as $transport) 
        <div class="flex flex-row py-3 {{ $loop->even ? 'even' : '' }}">
            <div class="p-1 w-full text-center">{{ $transport->transport_name ?? $transport->preset->transport_preset_name }}</div>
            <div class="p-1 w-full text-center">
                <div class="flex items-center justify-center w-full">
                    <label for="transport{{ $transport->transport_id }}" class="flex items-center cursor-pointer">
                        <div class="relative">
                            <input class="transport-active hidden" id="transport{{ $transport->transport_id }}" name="transport_active" data-id="{{ $transport->transport_id }}" type="checkbox" 
                                @if($transport->transport_active == 1) 
                                    checked="checked"
                                @endif
                             />
                            <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 inset-y-0 left-0"></div>
                        </div>
                        <div class="ml-3 text-gray-700 font-medium"></div>
                    </label>
                </div>
            </div>
            <div class="p-1 w-full text-center"><img class="mx-auto" src="{{ $transport->transport_logo }}" /></div>
            <div class="p-1 w-full text-center"><img class="mx-auto" src="{{ $transport->transport_logo_selected }}" /></div>
            <div class="p-1 w-full text-center">{{ $transport->transport_score ?? $transport->preset->transport_preset_score }}</div>
            <div class="p-1 w-full text-center">
                @php
                    $current_transport_type = $transport->transport_type ?? $transport->preset->transport_preset_type;

                    foreach($transport_types as $transport_type)
                    {
                        if($current_transport_type === $transport_type->code) {
                            $current_transport_type_name = $transport_type->name;
                        }
                    }
                @endphp
                {{ $current_transport_type_name ?? '' }}
            </div>
            <div class="p-1 w-full text-center">{{ $transport->level->transport_level_name ?? $transport->level->transport_level_name }}</div>
            <div class="p-1 w-full text-center">
                <a class="btn secondary" href="{{ route('city.transportEdit', [$city->city_id, $transport->transport_id]) }}">Edit</a>
            </div>
        </div>
        @endforeach
        <div class="py-5">
            {!! $transports->links() !!}
        </div>
        @endif
    </div>
</div>
@stop