@extends('layouts.app')
@section('content')
    @push('stylesheets')
        <link href="{{ asset('assets/custom/intl-tel-input-master/build/css/intlTelInput.css') }}"rel="stylesheet" />
        <link href="{{ asset('toastr.min.css') }}"rel="stylesheet" />
    @endpush

    <div class="page-wrapper">
        <div class="page-content-tab">
            <div class="container-fluid">
                <div class="row">
                    <div class="col-sm-12">
                        <div class="page-title-box">
                            <div class="float-end">
                                <ol class="breadcrumb">
                                    <li class="breadcrumb-item">
                                        <a href="{{ route('users.index') }}">Update Business Profile
                                        </a>
                                    </li>
                                </ol>
                            </div>
                            <h4 class="page-title">Update Business Profile
                            </h4>
                        </div>
                        <!--end page-title-box-->
                    </div>
                    <!--end col-->
                </div>
                <div class="row">
                    <div class="col-12 col-lg-12">
                        <div class="card">
                            <div class="card-body">
                                <form class="form-horizontal"action="" method="post" id="businessProfileEdit"
                                    enctype="multipart/form-data">
                                    @csrf
                                    <input type="hidden" name="businessId" value="{{ $businesData['id'] ? $businesData['id'] : "" }}">
                                    <nav>
                                        <div class="nav nav-tabs for-padding" id="nav-tab">
                                            <a class="nav-link active" id="step1-tab" data-bs-toggle="tab"
                                                href="#step1">1</a>
                                            <a class="nav-link" id="step2-tab" data-bs-toggle="tab" href="#step2">2</a>
                                            <a class="nav-link" id="step3-tab" data-bs-toggle="tab" href="#step3">3</a>
                                            <a class="nav-link" id="step4-tab" data-bs-toggle="tab" href="#step4">4</a>
                                        </div>
                                    </nav>
                                    <div class="tab-content" id="nav-tabContent">
                                        <div class="tab-pane active" id="step1">
                                            <h4 class="card-title mt-3 mb-1 invisible"></h4>
                                            <div class="row pt-4">
                                                <div class="col-md-6 mx-auto">
                                                    <div class="form-group row mb-2">
                                                        <label for="businessLogo"
                                                            class="col-lg-3 col-form-label text-end">Business Logo</label>
                                                        <div class="col-lg-9">
                                                            <div class="d-grid">
                                                                <div
                                                                    class="preview-box d-block justify-content-center rounded shadow overflow-hidden bg-light p-1 text-center">
                                                                    Upload Image here
                                                                </div>
                                                                <input
                                                                    class="form-control required invisible h-25"
                                                                    type="file" id="businessLogo" name="businessLogo"
                                                                    accept="image/*" onchange={handleChange()}  style=" height: 10px !important; " />
                                                                <label class="btn-upload btn btn-primary mt-0 text-white"
                                                                    for="businessLogo">Upload Image</label>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <!--end form-group-->
                                                </div>
                                                <!--end col-->
                                            </div>
                                            <div class="row pt-4">
                                                <div class="col-md-6 mx-auto">
                                                    <div class="form-group row mb-2">
                                                        <label for="businessCoverImage"
                                                            class="col-lg-3 col-form-label text-end">Business Cover
                                                            page</label>
                                                        <div class="col-lg-9">
                                                            <div class="d-grid">
                                                                <div
                                                                    class="preview-box preview-box-one d-block justify-content-center rounded shadow overflow-hidden bg-light p-1 text-center">
                                                                    Upload Cover Image here
                                                                </div>
                                                                <input
                                                                    class="form-control required invisible h-25"
                                                                    type="file" id="businessCoverImage"
                                                                    name="businessCoverImage" accept="image/*"
                                                                    onchange={handleChangeOne()} style=" height: 10px !important; "  />
                                                                <label class="btn-upload btn btn-primary mt-0 text-white"
                                                                    for="businessCoverImage">Upload Image</label>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <!--end form-group-->
                                                </div>
                                                <!--end col-->
                                            </div>
                                            <div class="row pt-4">
                                                <div class="col-md-6 mx-auto">
                                                    <div class="form-group row mb-2">
                                                        <label for="businessWebsite"
                                                            class="col-lg-3 col-form-label text-end">Website</label>
                                                        <div class="col-lg-9">
                                                            <input id="businessWebsite" name="businessWebsite"
                                                                type="text" class="form-control required">
                                                        </div>
                                                    </div>
                                                    <!--end form-group-->
                                                </div>
                                                <!--end col-->
                                            </div>
                                            <div class="row pt-4">
                                                <div class="col-md-6 mx-auto">
                                                    <div class="form-group row mb-2">
                                                        <label for="businessYearFounded"
                                                            class="col-lg-3 col-form-label text-end">Year founded</label>
                                                        <div class="col-lg-9">
                                                            <select id="businessYearFounded" class="businessYearFounded form-control form-select"></select>
                                                        </div>
                                                    </div>
                                                    <!--end form-group-->
                                                </div>
                                                <!--end col-->
                                            </div>
                                            <!--end row-->
                                            <!--end row-->
                                            <div class="">
                                                <button type="button" id="step1Next"
                                                    class="btn btn-primary float-end">Next</button>
                                            </div>
                                        </div>
                                        <div class="tab-pane" id="step2">
                                            <h4 class="card-title mt-3 mb-1 invisible"></h4>
                                            <div class="row">
                                                <div class="col-md-6">
                                                    <div class="form-group row mb-2">
                                                        <label for="txtFirstNameShipping"
                                                            class="col-lg-3 col-form-label text-end">PAN Card</label>
                                                        <div class="col-lg-9">
                                                            <input id="txtFirstNameShipping" name="txtFirstNameShipping"
                                                                type="text" class="form-control">
                                                        </div>
                                                    </div>
                                                    <!--end form-group-->
                                                </div>
                                                <!--end col-->
                                                <div class="col-md-6">
                                                    <div class="form-group row mb-2">
                                                        <label for="txtLastNameShipping"
                                                            class="col-lg-3 col-form-label text-end">VAT/TIN No.</label>
                                                        <div class="col-lg-9">
                                                            <input id="txtLastNameShipping" name="txtLastNameShipping"
                                                                type="text" class="form-control">
                                                        </div>
                                                    </div>
                                                    <!--end form-group-->
                                                </div>
                                                <!--end col-->
                                            </div>
                                            <!--end row-->
                                            <div>
                                                <button type="button" id="step2Prev"
                                                    class="btn btn-secondary float-start">Previous</button>
                                                <button type="button" id="step2Next"
                                                    class="btn btn-primary float-end">Next</button>
                                            </div>
                                        </div>
                                        <div class="tab-pane" id="step3">
                                            <h4 class="card-title mt-3 mb-1 invisible"></h4>
                                            <div class="row">
                                                <div class="col-md-6">
                                                    <div class="form-group row mb-2">
                                                        <label for="txtNameCard"
                                                            class="col-lg-3 col-form-label text-end">Name on Card</label>
                                                        <div class="col-lg-9">
                                                            <input id="txtNameCard" name="txtNameCard" type="text"
                                                                class="form-control">
                                                        </div>
                                                    </div>
                                                    <!--end form-group-->
                                                </div>
                                                <!--end col-->
                                                <div class="col-md-6">
                                                    <div class="form-group row mb-2">
                                                        <label for="ddlCreditCardType"
                                                            class="col-lg-3 col-form-label text-end">Credit Card
                                                            Type</label>
                                                        <div class="col-lg-9">
                                                            <select id="ddlCreditCardType" name="ddlCreditCardType"
                                                                class="form-select">
                                                                <option value="">--Please Select--</option>
                                                                <option value="AE">American Express</option>
                                                                <option value="VI">Visa</option>
                                                                <option value="MC">MasterCard</option>
                                                                <option value="DI">Discover</option>
                                                            </select>
                                                        </div>
                                                    </div>
                                                    <!--end form-group-->
                                                </div>
                                                <!--end col-->
                                            </div>
                                            <!--end row-->
                                            <div>
                                                <button type="button" id="step3Prev"
                                                    class="btn btn-secondary float-start">Previous</button>
                                                <button type="button" id="step3Next"
                                                    class="btn btn-primary float-end">Next</button>
                                            </div>
                                        </div>
                                        <div class="tab-pane" id="step4">
                                            <h4 class="card-title mt-3 invisible"></h4>
                                            <div class="form-check my-2">
                                                <input class="form-check-input" type="checkbox" value=""
                                                    id="flexCheckDefault">
                                                <label class="form-check-label" for="flexCheckDefault">
                                                    I agree with the Terms and Conditions.
                                                </label>
                                            </div>
                                            <div>
                                                <button type="button" id="step4Prev"
                                                    class="btn btn-secondary float-start">Previous</button>
                                                <button type="button" id="step4Finish"
                                                    class="btn btn-danger float-end">Finish</button>
                                            </div>
                                        </div>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                    <div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    @push('scripts')
        <script src="{{ asset('theme/js/form-wizard.js') }}"></script>
        <script src="{{ asset('theme/js/pages/file-upload.init.js') }}"></script>
        <script src="{{ asset('js/backend/business-profile-operations.js') }}"></script>
        <script src="{{ asset('assets/custom/jQuery-validation-plugin/additional-methods.js') }}"></script>
        <script src="{{ asset('assets/plugins/toastr/toastr.min.js') }}"></script>
    @endpush

    @if (Session::has('message'))
        <script>
            $(function() {
                toastr.{{ Session::get('alert-class') }}('{{ Session::get('message') }}');
            });
        </script>
    @endif
@endsection