@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
@method('PUT') 

@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-2xl4 md:p-10">
        <h1 class="text-3xl 2xl:text-4xl font-semibold leading-3 text-center p-2">Update Your City Branding</h1>
        <hr class="w-24 mx-auto h2-line pb-5 mb-5" />

        <div class="flex flex-col py-3 pb-10 gap-10 md:gap-5 items-center">
            <div class="w-full items-center text-center">
                <img class="prev_logo border mx-auto" src="{{ $city->logo }}" width="295" height="121" />
            </div>
            <div class="flex flex-row w-full">
                <div class="w-2/3">
                    <label class="font-medium">Upload Your City Logo</label><br />
                    <span class="text-sm">(Logo should be 295 x 121 px)</span>
                </div>
                <div class="w-1/3 branding-upload">
                    <x-upload-image button="Upload" field="logo" />
                </div>
            </div>
        </div>

        <div class="flex flex-col py-3 pb-10 gap-10 md:gap-5 items-center">
            <div class="w-full items-center text-center">
                <img class="prev_bg_top border mx-auto" src="{{ $city->bg_top }}" width="600" height="172" />
            </div>
            <div class="flex flex-row w-full">
                <div class="w-2/3">
                    <label class="font-medium">Upload Your City Top Background</label><br />
                    <span class="text-sm">(Top Background should be 600 x 172 px)</span>
                </div>
                <div class="w-1/3 branding-upload">
                    <x-upload-image button="Upload" field="bg_top" />
                </div>
            </div>
        </div>

        <div class="flex flex-col py-3 pb-10 gap-10 md:gap-5 items-center">
            <div class="w-full items-center text-center">
                <img class="prev_bg_bottom_splash border mx-auto" src="{{ $city->bg_bottom_splash }}" width="600" height="545" />
            </div>
            <div class="flex flex-row w-full">
                <div class="w-2/3">
                    <label class="font-medium">Upload Your City Bottom Background for Splash Page</label><br />
                    <span class="text-sm">(Bottom Background for Splash Page should be 600 x 545 px)</span>
                </div>
                <div class="w-1/3 branding-upload">
                    <x-upload-image button="Upload" field="bg_bottom_splash" />
                </div>
            </div>
        </div>

        <div class="flex flex-col py-3 pb-10 gap-10 md:gap-5 items-center">
            <div class="w-full items-center text-center">
                <img class="prev_bg_bottom border mx-auto" src="{{ $city->bg_bottom }}" width="600" height="172" />
            </div>
            <div class="flex flex-row w-full">
                <div class="w-2/3">
                    <label class="font-medium">Upload Your City Bottom Background</label><br />
                    (Bottom Background should be 600 x 172 px)
                </div>
                <div class="w-1/3 branding-upload">
                    <x-upload-image button="Upload" field="bg_bottom" />
                </div>
            </div>
        </div>
        <div class="flex flex-col py-3 gap-10 md:gap-5 items-center">
            <input class="btn" type="submit" value="Save" />
        </div>
    </div>

    <div class="flex flex-col w-full bg-white rounded-3xl shadow-2xl4 md:p-10">
        <h1 class="text-3xl 2xl:text-4xl font-semibold leading-3 text-center p-2">Request Customisations</h1>
        <hr class="w-24 mx-auto h2-line pb-5 mb-5" />
        <div class="flex flex-col py-3">
            <textarea name="custom_branding" rows="10">{{ $city->custom_branding ?? '' }}</textarea>
        </div>
        <div class="flex flex-col py-3 items-center">
            <input class="btn btn2" type="submit" value="Save" />
        </div>
    </div>
</div>
</form>


@stop