@extends('layouts.app')

@section('title', 'Application Properties')

@section('content')
<div class="">
    <div class="d-flex flex-column h-100">
        <div class="d-flex justify-content-between align-items-center mb-md">
            <div class="d-flex flex-column">
                <h1 class="lh-sm mb-0">Application Properties</h1>
                <small class="text-muted lh-sm">Informasi dan Settingan awal Applikasi</small>
            </div>
        </div>
        <div class="h-100 d-flex flex-column flex-fill overflow-hidden">

            <form id="app-properties-form" action="{{ route('application-properties.update', $data->id) }}" method="post" enctype="multipart/form-data" class="d-flex flex-column h-100">
                @csrf()
                @method('put')
                <input type="hidden" name="menuId" value="{{ $menuId }}" />
                <x-fluent-tab 
                    :tabs="[
                        'general' => 'General',
                        'sosmed' => 'Social Media',
                        'setting' => 'Settings'
                    ]"
                    active="general"
                >
                    <x-slot:slot>
                        <div class="fluent-panel active p-md" id="general">
                            <h2 class="text-decoration-underline mb-sm">Logo Aplikasi</h2>
                            <div class="grid grid-12">
                                <div class="col-span-8">
                                    <div class="grid grid-12">
                                        <div class="col-span-4">
                                            <label for="icon_logo" class="small">Logo (Max. 2MB)</label>
                                        </div>
                                        <div class="col-span-8">
                                            <x-fluent-input 
                                                type="file"
                                                name="icon_logo" 
                                                placeholder="Pilih file"
                                                invalid="{{ $errors->has('icon_logo') ? 'is-invalid' : '' }}"
                                            />
                                        </div>
                                    </div>
                                    <div class="grid grid-12 mt-sm">
                                        <div class="col-span-4">
                                            <label for="icon_text_1">Logo Title</label>
                                        </div>
                                        <div class="col-span-8">
                                            <x-fluent-input 
                                                name="icon_text_1" 
                                                placeholder="Logo Title" 
                                                autofocus="true"
                                                :errorsBag="$errors"
                                                value="{{ old('icon_text_1', $data->icon_text_1) }}"
                                            />
                                        </div>
                                    </div>
                                    <div class="grid grid-12 mt-sm">
                                        <div class="col-span-4">
                                            <label for="icon_text_2">Logo Description</label>
                                        </div>
                                        <div class="col-span-8">
                                            <x-fluent-input 
                                                name="icon_text_2" 
                                                placeholder="Logo Description" 
                                                :errorsBag="$errors"
                                                value="{{ old('icon_text_2', $data->icon_text_2) }}"
                                            />
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <h2 class="my-md text-decoration-underline">Profile Perusahaan</h2>
                            <div class="grid grid-12">
                                <div class="col-span-8">
                                    <div class="grid grid-12">
                                        <div class="col-span-4">
                                            <label for="name">Nama Perusahaan</label>
                                        </div>
                                        <div class="col-span-8">
                                            <x-fluent-input 
                                                name="name" 
                                                placeholder="Logo Title" 
                                                :errorsBag="$errors"
                                                value="{{ old('name', $data->name) }}"
                                            />
                                        </div>
                                    </div>
                                    <div class="grid grid-12 mt-sm">
                                        <div class="col-span-4">
                                            <label for="address">Alamat</label>
                                        </div>
                                        <div class="col-span-8">
                                            <x-fluent-textarea 
                                                name="address" 
                                                placeholder="Alamat Perusahaan" 
                                                :errorsBag="$errors"
                                                value="{{ old('address', $data->address) }}"
                                            />
                                        </div>
                                    </div>
                                    <div class="grid grid-12 mt-sm">
                                        <div class="col-span-4">
                                            <label for="phone">Telp</label>
                                        </div>
                                        <div class="col-span-4">
                                            <x-fluent-input 
                                                name="phone" 
                                                placeholder="+62-xxx-xxx-xxxx" 
                                                :errorsBag="$errors"
                                                value="{{ old('phone', $data->phone) }}"
                                            />
                                        </div>
                                    </div>
                                    <div class="grid grid-12 mt-sm">
                                        <div class="col-span-4">
                                            <label for="mobile">Mobile/Whatsapp</label>
                                        </div>
                                        <div class="col-span-4">
                                            <x-fluent-input 
                                                name="mobile" 
                                                placeholder="+62-xxx-xxx-xxxx" 
                                                :errorsBag="$errors"
                                                value="{{ old('mobile', $data->mobile) }}"
                                            />
                                        </div>
                                    </div>
                                    <div class="grid grid-12 mt-sm">
                                        <div class="col-span-4">
                                            <label for="fax">Fax</label>
                                        </div>
                                        <div class="col-span-4">
                                            <x-fluent-input 
                                                name="fax" 
                                                placeholder="+62-xxx-xxx-xxxx" 
                                                :errorsBag="$errors"
                                                value="{{ old('fax', $data->fax) }}"
                                            />
                                        </div>
                                    </div>
                                    <div class="grid grid-12 mt-sm">
                                        <div class="col-span-4">
                                            <label for="email">Email</label>
                                        </div>
                                        <div class="col-span-8">
                                            <x-fluent-input 
                                                name="email" 
                                                placeholder="mail@domain.com" 
                                                :errorsBag="$errors"
                                                value="{{ old('email', $data->email) }}"
                                            />
                                        </div>
                                    </div>
                                    <div class="grid grid-12 mt-sm">
                                        <div class="col-span-4">
                                            <label for="website">Website</label>
                                        </div>
                                        <div class="col-span-8">
                                            <x-fluent-input 
                                                name="website" 
                                                placeholder="https://example.com" 
                                                :errorsBag="$errors"
                                                value="{{ old('website', $data->website) }}"
                                            />
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="fluent-panel p-md" id="sosmed">
                            <div class="grid grid-12">
                                <div class="col-span-8">
                                    <div class="grid grid-12">
                                        <div class="col-span-4">
                                            <label for="youtube">Youtube</label>
                                        </div>
                                        <div class="col-span-8">
                                            <x-fluent-input 
                                                type="url"
                                                name="youtube" 
                                                placeholder="https://youtube.com/xxx" 
                                                :errorsBag="$errors"
                                                value="{{ old('youtube', $data->youtube) }}"
                                            />
                                        </div>
                                    </div>
                                    <div class="grid grid-12 mt-sm">
                                        <div class="col-span-4">
                                            <label for="facebook">Facebook</label>
                                        </div>
                                        <div class="col-span-8">
                                            <x-fluent-input 
                                                type="url"
                                                name="facebook" 
                                                placeholder="https://facebook.com/xxxx" 
                                                :errorsBag="$errors"
                                                value="{{ old('facebook', $data->facebook) }}"
                                            />
                                        </div>
                                    </div>
                                    <div class="grid grid-12 mt-sm">
                                        <div class="col-span-4">
                                            <label for="twitter">Twitter X</label>
                                        </div>
                                        <div class="col-span-8">
                                            <x-fluent-input 
                                                type="url"
                                                name="twitter" 
                                                placeholder="https://x.com/xxxx" 
                                                :errorsBag="$errors"
                                                value="{{ old('twitter', $data->twitter) }}"
                                            />
                                        </div>
                                    </div>
                                    <div class="grid grid-12 mt-sm">
                                        <div class="col-span-4">
                                            <label for="instagram">Instagram</label>
                                        </div>
                                        <div class="col-span-8">
                                            <x-fluent-input 
                                                type="url"
                                                name="instagram" 
                                                placeholder="https://instagram.com/xxxx" 
                                                :errorsBag="$errors"
                                                value="{{ old('instagram', $data->instagram) }}"
                                            />
                                        </div>
                                    </div>
                                    <div class="grid grid-12 mt-sm">
                                        <div class="col-span-4">
                                            <label for="linkedin">LinkedIn</label>
                                        </div>
                                        <div class="col-span-8">
                                            <x-fluent-input 
                                                type="url"
                                                name="linkedin" 
                                                placeholder="https://linkedin.com/xxxx" 
                                                :errorsBag="$errors"
                                                value="{{ old('linkedin', $data->linkedin) }}"
                                            />
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="fluent-panel p-md" id="setting">
                            <h2 class="mb-sm text-decoration-underline mb-sm">Email Settings</h2>
                            <div class="grid grid-12">
                                <div class="col-span-8">
                                    <div class="grid grid-12">
                                        <div class="col-span-4">
                                            <label for="mail_driver">Mail Driver</label>
                                        </div>
                                        <div class="col-span-8">
                                            <x-fluent-input 
                                                name="mail_driver" 
                                                placeholder="Mail driver" 
                                                :errorsBag="$errors"
                                                value="{{ old('mail_driver', $data->mail_driver) }}"
                                            />
                                        </div>
                                    </div>
                                    <div class="grid grid-12 mt-sm">
                                        <div class="col-span-4">
                                            <label for="mail_host">Mail Host</label>
                                        </div>
                                        <div class="col-span-8">
                                            <x-fluent-input 
                                                name="mail_host" 
                                                placeholder="Mail host" 
                                                :errorsBag="$errors"
                                                value="{{ old('mail_host', $data->mail_host) }}"
                                            />
                                        </div>
                                    </div>
                                    <div class="grid grid-12 mt-sm">
                                        <div class="col-span-4">
                                            <label for="mail_port">Port</label>
                                        </div>
                                        <div class="col-span-3">
                                            <x-fluent-input 
                                                type="number"
                                                name="mail_port" 
                                                :errorsBag="$errors"
                                                value="{{ old('mail_port', $data->mail_port) ?? 0 }}"
                                            />
                                        </div>
                                    </div>
                                    <div class="grid grid-12 mt-sm">
                                        <div class="col-span-4">
                                            <label for="mail_username">Username</label>
                                        </div>
                                        <div class="col-span-8">
                                            <x-fluent-input 
                                                name="mail_username" 
                                                placeholder="Email Username" 
                                                :errorsBag="$errors"
                                                value="{{ old('mail_username', $data->mail_username) }}"
                                            />
                                        </div>
                                    </div>
                                    <div class="grid grid-12 mt-sm">
                                        <div class="col-span-4">
                                            <label for="mail_password">Password</label>
                                        </div>
                                        <div class="col-span-8">
                                            <x-fluent-input 
                                                type="password"
                                                name="mail_password" 
                                                :errorsBag="$errors"
                                                value="{{ old('mail_password', $data->mail_password) }}"
                                            />
                                        </div>
                                    </div>
                                    <div class="grid grid-12 mt-sm">
                                        <div class="col-span-4">
                                            <span>Mail Encryption</span>
                                        </div>
                                        <div class="col-span-3">
                                            <x-fluent-select
                                                name="mail_encryption"
                                                :value="old('mail_encryption', $data->mail_encryption)"
                                                :options="[
                                                    'TLS' => 'TLS',
                                                    'SSL' => 'SSL',
                                                ]"
                                                :errorsBag="$errors"
                                                search="false"
                                            />
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <h2 class="my-sm text-decoration-underline mb-sm mt-md">Hak Paten Aplikasi</h2>
                            <div class="grid grid-12">
                                <div class="col-span-8">
                                    <div class="grid grid-12">
                                        <div class="col-span-4">
                                            <label for="copyright">Copyright</label>
                                        </div>
                                        <div class="col-span-8">
                                            <x-fluent-input 
                                                name="copyright" 
                                                placeholder="Copyright" 
                                                :errorsBag="$errors"
                                                value="{{ old('copyright', $data->copyright) }}"
                                            />
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <h2 class="my-sm text-decoration-underline mb-sm mt-md">Other Settings</h2>
                            <div class="grid grid-12">
                                <div class="col-span-8">
                                    <div class="grid grid-12">
                                        <div class="col-span-4">
                                            <label for="frontend_website">Frontend Website</label>
                                        </div>
                                        <div class="col-span-8">
                                            <x-fluent-toggle 
                                                name="frontend_website" 
                                                label="Have Website Frontend"
                                                :checked="$data->frontend_website"
                                            />
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </x-slot:slot>

                    <x-slot:footer>
                        <x-fluent-button 
                            type="submit"
                            variant="primary"
                        >
                            Update
                        </x-fluent-button>
                    </x-slot:footer>

                </x-fluent-tab>
            </form>
        </div>
    </div>
</div>
@endsection