@extends('InstaPermission.layout.masterlayout')
@section('content')
    <div class="page-wrapper">
        <!--page-content-wrapper-->
        <div class="page-content-wrapper" style="margin-left:0;">
            <div class="page-content">

                <div class="row text-center">

                    <div class="col-md-3"></div>
                    <div class="col-md-6">
                        <h4>KANPAI CMS - INSTALLATION WIZARD</h4>
                        <div class="progress mt-3" style="height:7px;">
                            <div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar"
                                aria-valuenow="75" aria-valuemin="0" aria-valuemax="100" style="width: 90%"></div>
                        </div>
                        <div class="card radius-15 mt-3">
                            <div class="card-body" style="padding: 1rem 1rem;">
                                <h6><b>Configure Your Admin</b></h6>
                                <hr />
                                <form class="row g-3" method="POST" action="{{ route('configure-admin-account') }}"
                                    enctype="multipart/form-data">
                                    @csrf
                                    <div class="col-12">
                                        <div class="input-group"> <span class="input-group-text" id="basic-addon1"
                                                style="font-size:14px;">Website Title<span
                                                    style="color:red;">*</span></span>
                                            <input type="text" class="form-control form-control-sm"
                                                placeholder="Website Title" name="website_name" required />
                                        </div>
                                    </div>
                                    <div class="col-md-12" style="margin-top:15px;text-align:left;">
                                        <label class="form-label" style="font-size:14px;">Your Website Logo
                                            (Size : 180x36)<span style="color:#FF0000;">*</span></label>
                                        <input type="file" class="form-control form-control-sm" name="officelogo"
                                            id="images" onChange="preview_images();" />
                                        <span id="image_preview"></span>

                                        <div id="old_img"><img
                                                src="{{ asset('uploads/general-setting/' . $basedata->officelogo) }}"
                                                alt="{{ $basedata->businesstitle }}" style="width:150px;margin-top: 1%;" />
                                        </div>
                                    </div>
                                    <div class="col-md-12" style="margin-top:15px;text-align:left;">
                                        <label class="form-label" style="font-size:14px;">Your Website Favicon (Size : 32x32)<span
                                                style="color:#FF0000;">*</span></label>
                                        <input type="file" class="form-control form-control-sm" name="officefavicon"
                                            id="images1" onChange="preview_images1();" />
                                        <span id="image_preview1"></span>
                                        <div id="old_img1"><img
                                                src="{{ asset('uploads/general-setting/' . $basedata->officefavicon) }}"
                                                alt="{{ $basedata->businesstitle }}" style="width:32px;margin-top: 1%;" />
                                        </div>
                                    </div>
                                    <hr />
                                    <h6><b>============= Website Super Admin Account Details =============</b></h6>
                                    <div class="col-12">
                                        <div class="input-group"> <span class="input-group-text" id="basic-addon1"
                                                style="font-size:14px;">Your Name<span style="color:red;">*</span></span>
                                            <input type="text" class="form-control form-control-sm"
                                                placeholder="Your Name" name="your_name" required />
                                        </div>

                                    </div>
                                    <div class="col-12">
                                        <div class="input-group"> <span class="input-group-text" id="basic-addon1"
                                                style="font-size:14px;">Email-ID<span
                                                    style="color:red;">*</span></span>
                                            <input type="email" class="form-control form-control-sm"
                                                placeholder="Email-ID" name="email_id" required />
                                        </div>

                                    </div>
                                    <div class="col-12">
                                        <div class="input-group"> <span class="input-group-text" id="basic-addon1"
                                                style="font-size:14px;">Password<span style="color:red;">*</span></span>
                                            <input type="password" class="form-control form-control-sm"
                                                placeholder="Password" name="password" required />
                                        </div>

                                    </div>
                                    <div class="col-12">
                                        <div class="input-group"> <span class="input-group-text" id="basic-addon1"
                                                style="font-size:14px;">Confirm Password<span
                                                    style="color:red;">*</span></span>
                                            <input type="password" class="form-control form-control-sm"
                                                placeholder="Confirm Password" name="confirm_password" required />
                                        </div>
                                    </div>

                                    <div class="col-md-8"></div>
                                    <div class="col-md-4">
                                        <div class="d-grid">
                                            <button type="submit" class="btn btn-primary"><i
                                                    class="bx bx-right-arrow-circle"></i> Finish</button>
                                        </div>
                                    </div>
                                </form>
                            </div>
                        </div>

                    </div>
                    <div class="col-md-3"></div>
                </div>
            </div>
        </div>
        <!--end page-content-wrapper-->
    </div>
    <!--end page-wrapper-->
    <!--start overlay-->
    <div class="overlay toggle-btn-mobile"></div>
    <!--end overlay-->
    <!--Start Back To Top Button-->
@endsection
@section('script')
    <script>
        function preview_images() {
            document.getElementById('old_img').style.display = 'none';
            $('.img-responsive').remove();
            var total_file = document.getElementById("images").files.length;
            for (var i = 0; i < total_file; i++) {
                $('#image_preview').append("<img class='img-responsive pull-right' src='" + URL.createObjectURL(event.target
                    .files[i]) + "' style='width:150px;margin-top: 1%;'/>");
            }
        }

        function preview_images1() {
            document.getElementById('old_img1').style.display = 'none';
            $('.img-responsive1').remove();
            var total_file = document.getElementById("images1").files.length;
            for (var i = 0; i < total_file; i++) {
                $('#image_preview1').append("<img class='img-responsive1 ' src='" + URL.createObjectURL(event
                    .target.files[i]) + "' style='width:150px;margin-top: 1%;'/>");
            }
        }
    </script>
@endsection