@extends('layout.master')
@section('content')
    <div class="content company_details">
        <div class="">
            <div class="row">
                <div class="col-12 col-xl-12 col-md-12 col-sm-12 order-1 order-xl-0">
                    <div class="mb-9">
                        <div class="card shadow-none border my-4" data-component-card="data-component-card">
                            <div class="card-header p-4 border-bottom bg-body">
                                <div class="row g-3 justify-content-between align-items-center">
                                    <div class="col-12 col-md">
                                        <h4 class="text-body mb-0" data-anchor="data-anchor">Register Page Design
                                        </h4>
                                    </div>
                                </div>
                            </div>

                            <div class="card-body p-0">
                                <div class="p-4 code-to-copy">
                                    <p>Default Register Design Page</p>
                                    <img src="{{ asset('assets/img/register/default_design1.webp') }}" alt="default-desgin"
                                        width="100%">

                                    <form class="row g-3 mt-3" action="{{ route('design_setting') }}" method="POST"
                                        enctype="multipart/form-data">

                                        @csrf

                                        <div class="col-md-6">
                                            <label class="form-label" for="customFile">Background Image </label>

                                            <input class="form-control" name="background_img"
                                                onchange="loadFile(event,'background_img')" id="customFile" type="file"
                                                accept="image/jpg, image/jpeg, image/png, image/svg" />
                                            <small class="text-danger">Only jpg,jpeg,png,svg format and maximum 2MB file
                                                allowed </small>

                                            <div class="avatar avatar-4xl mt-2 d-block">
                                                @if (@$PageDesign->background_img != '')
                                                    <a href="{{ asset('uploads/company/' . $PageDesign->background_img) }}"
                                                        data-gallery="gallery-posts-0" id="background_img_parent">
                                                        <img class="rounded-circle" id="background_img"
                                                            src="{{ asset('uploads/page_design/' . $PageDesign->background_img) }}">
                                                    </a>
                                                @else
                                                    <a href="{{ asset('assets/register/img/figure/bg33-1.jpg') }}"
                                                        data-gallery="gallery-posts-0" id="background_img_parent">
                                                        <img class="rounded-circle" id="background_img"
                                                            src="{{ asset('assets/register/img/figure/bg33-1.jpg') }}">
                                                    </a>
                                                @endif
                                            </div>

                                        </div>

                                        <div class="col-md-6">
                                            <label class="form-label" for="button_color">Button Color</label>
                                            <input class="form-control" name="button_color" id="button_color" type="color"
                                                style="height: 38px;"
                                                value="{{ old('button_color', @$PageDesign->button_color) }}" />

                                        </div>

                                        <div class="col-md-6">
                                            <label class="form-label" for="form_background_color"> Form Background
                                                Color</label>
                                            <input class="form-control" name="form_background_color"
                                                id="form_background_color" type="color" style="height: 38px;"
                                                value="{{ old('form_background_color', @$PageDesign->form_background_color) }}" />

                                        </div>

                                        <div class="col-md-6">
                                            <label class="form-label" for="form_text_color"> Form Text
                                                Color</label>
                                            <input class="form-control" name="form_text_color" id="form_text_color"
                                                type="color" style="height: 38px;"
                                                value="{{ old('form_text_color', @$PageDesign->form_text_color) }}" />

                                        </div>

                                        <div class="col-12">
                                            <button class="btn btn-primary" type="submit">Update Design </button>
                                        </div>

                                    </form>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-12 col-xl-4 col-md-4 col-sm-12 order-1 order-xl-0"></div>

            </div>
        </div>
    </div>
@endsection