@extends('admin.layouts.app')
@section('content')
    <div class="page-content">
        <div class="container-fluid">
            <div class="row">
                <div class="col-6">
                    <div class="page-title-box d-sm-flex align-items-center justify-content-between">
                        <h4 class="mb-sm-0 font-size-18">
                            Website Setup
                        </h4>
                    </div>
                </div>
                <div class="col-6 text-end">
                    <x-admin.back-button route="{{ route('admin.websetup.index') }}" />
                </div>
            </div>
            <div class="row">
                <div class="card">
                    <div class="card-body p-4">
                        <form action="{{ route('admin.websetup.store') }}" method="POST" enctype="multipart/form-data"
                            id="add_form">
                            @csrf
                            <div class="row">
                                <div class="col-lg-6 mb-3">
                                    <label for="header_logo" class="form-label">Logo</label>
                                    <div class="input-group auth-pass-inputgroup">
                                        <input id="logo" class="form-control" type="file" name="logo"
                                            accept="image/*">
                                        <input type="hidden" name="type[]" value="logo">
                                    </div>
                                    <img id="img1"
                                        src="{{ asset('backend/assets/images/websetup/' . websiteSetupValue('logo')) }}"
                                        class="mt-2" alt="Logo" height="100" width="100"
                                        onerror="this.onerror=null; this.src='{{ asset('backend/assets/images/no-image.png') }}'">
                                </div>
                                <div class="col-lg-6 mb-3">
                                    <label for="footer_logo" class="form-label">Favicon</label>
                                    <div class="input-group auth-pass-inputgroup">
                                        <input id="favicon" class="form-control" type="file" name="favicon"
                                            accept="image/*">
                                        <input type="hidden" name="type[]" value="favicon">
                                    </div>
                                    <img id="img2"
                                        src="{{ asset('backend/assets/images/websetup/' . websiteSetupValue('favicon')) }}"
                                        class="mt-2" alt="Favicon" height="50" width="50"
                                        onerror="this.onerror=null; this.src='{{ asset('backend/assets/images/no-image.png') }}'">
                                </div>
                                <div class="col-lg-6 mb-3">
                                    <label for="copyright_text" class="form-label">Copyright Text</label>
                                    <input type="text" name="copyright" class="form-control" id="copyright"
                                        rows="2" placeholder="Enter Copyright"
                                        value="{{ websiteSetupValue('copyright') }}">
                                    <input type="hidden" name="type[]" value="copyright">
                                </div>
                                <div class="col-lg-6 mb-3">
                                    <label for="phone" class="form-label">Phone</label>
                                    <input id="contact_number" class="form-control" type="text" name="contact_number"
                                        placeholder="Enter Contact Number" value="{{ websiteSetupValue('contact_number') }}"
                                        oninput="validatePhone(this)">
                                    <input type="hidden" name="type[]" value="contact_number">
                                </div>
                                <div class="col-lg-6 mb-3">
                                    <label for="alt_phone" class="form-label">Alternate Phone</label>
                                    <input id="contact_number_2" class="form-control" type="text" name="contact_number_2"
                                        placeholder="Enter Contact Number"
                                        value="{{ websiteSetupValue('contact_number_2') }}" oninput="validatePhone(this)">
                                    <input type="hidden" name="type[]" value="contact_number_2">
                                </div>
                                <div class="col-lg-6 mb-3">
                                    <label for="about" class="form-label">About</label>
                                    <textarea name="about_content" class="form-control" rows="2" placeholder="Enter Content">{{ websiteSetupValue('about_content') }}</textarea>
                                    <input type="hidden" name="type[]" value="about_content">
                                </div>
                                <div class="col-lg-6 mb-3">
                                    <label for="address" class="form-label">Address</label>
                                    <textarea name="address" class="form-control" id="address" rows="2" placeholder="Enter Full Address">{{ websiteSetupValue('address') }}</textarea>
                                    <input type="hidden" name="type[]" value="address">
                                </div>
                                <div class="col-lg-6 mb-3">
                                    <label for="email" class="form-label">Email</label>
                                    <input id="email" class="form-control" type="email" name="email"
                                        placeholder="Enter Email" value="{{ websiteSetupValue('email') }}">
                                    <input type="hidden" name="type[]" value="email">
                                </div>
                                <div class="col-lg-6 mb-3">
                                    <label for="facebook" class="form-label">Facebook</label>
                                    <div class="input-group">
                                        <div class="input-group-text"><i class="mdi mdi-facebook"></i></div>
                                        <input type="text" name="facebook" class="form-control"
                                            placeholder="Enter Facebook Link" value="{{ websiteSetupValue('facebook') }}"
                                            data-input>
                                        <input type="hidden" name="type[]" value="facebook">
                                    </div>
                                </div>
                                <div class="col-lg-6 mb-3">
                                    <label for="instagram" class="form-label">Instagram</label>
                                    <div class="input-group">
                                        <div class="input-group-text"><i class="mdi mdi-instagram"></i></div>
                                        <input type="text" name="instagram" class="form-control"
                                            placeholder="Enter Instagram Link"
                                            value="{{ websiteSetupValue('instagram') }}" data-input>
                                        <input type="hidden" name="type[]" value="instagram">
                                    </div>
                                </div>
                                <div class="col-lg-6 mb-3">
                                    <label for="youtube" class="form-label">Youtube</label>
                                    <div class="input-group">
                                        <div class="input-group-text"><i class="mdi mdi-youtube"></i></div>
                                        <input type="text" name="youtube" class="form-control"
                                            placeholder="Enter Youtube Link" value="{{ websiteSetupValue('youtube') }}"
                                            data-input>
                                        <input type="hidden" name="type[]" value="youtube">
                                    </div>
                                </div>
                                <div class="col-lg-6 mb-3">
                                    <label for="twitter" class="form-label">Twitter</label>
                                    <div class="input-group">
                                        <div class="input-group-text"><i class="mdi mdi-twitter"></i></div>
                                        <input type="text" name="twitter" class="form-control"
                                            placeholder="Enter Twitter Link" value="{{ websiteSetupValue('twitter') }}"
                                            data-input>
                                        <input type="hidden" name="type[]" value="twitter">
                                    </div>
                                </div>
                                <div class="col-lg-6 mb-3">
                                    <label for="linkedin" class="form-label">Linkedin</label>
                                    <div class="input-group">
                                        <div class="input-group-text"><i class="mdi mdi-linkedin"></i></div>
                                        <input type="text" name="linkedin" class="form-control"
                                            placeholder="Enter Linkedin Link" value="{{ websiteSetupValue('linkedin') }}"
                                            data-input>
                                        <input type="hidden" name="type[]" value="linkedin">
                                    </div>
                                </div>
                                <div class="col-lg-6 mb-3">
                                    <label for="whatsapp" class="form-label">Whatsapp</label>
                                    <div class="input-group">
                                        <div class="input-group-text"><i class="fa fa-whatsapp"></i></div>
                                        <input id="whats_app_number" class="form-control" type="text"
                                            name="whats_app_number" placeholder="Enter Whatsapp Number"
                                            value="{{ websiteSetupValue('whats_app_number') }}"
                                            oninput="validatePhone(this)">
                                        <input type="hidden" name="type[]" value="whats_app_number">
                                    </div>
                                </div>
                                <div class="col-lg-12 mb-3 text-center">
                                    <x-admin.save-button />
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>

    @push('js')
        <script>
            logo.onchange = evt => {
                const [file] = logo.files
                if (file) {
                    img1.src = URL.createObjectURL(file)
                }
            }

            favicon.onchange = evt => {
                const [file] = favicon.files
                if (file) {
                    img2.src = URL.createObjectURL(file)
                }
            }

            function validatePhone(input) {
                const value = input.value;
                const sanitizedValue = value.replace(/\D/g, '');

                input.value = sanitizedValue;

                if (sanitizedValue.length > 10) {
                    input.value = sanitizedValue.slice(0, 10);
                }
            }
        </script>
    @endpush
@endsection