@extends('admin.main')
@section('content')
<div class="w-lg-80  py-4 stepper-bars">
    <div class="container bg-color p-3 rounded-4">
        <div class="row justify-content-center">
            <div class="col-lg-4">
                <div class="row justify-content-center text-center">
                    <div class="col-lg-3 col-md-6 col-12 pe-0">
                        <h6 class="font-13 inter colorblack mb-0">Details</h6>
                        <i class="fa-solid fa-circle colorskyblue font-12"></i>
                        <div class="progress rounded-5" role="progressbar" aria-label="Basic example" aria-valuenow="75"
                            aria-valuemin="0" aria-valuemax="100">
                            <div class="progress-bar rounded-5" style="width: 50%"></div>
                        </div>
                    </div>
                    <div class="col-lg-6 col-md-6 col-12 pe-0">
                        <h6 class="font-13 inter colorblack mb-0">Target Audience</h6>
                        <i class="fa-solid fa-circle colorskyblue font-12"></i>
                        <div class="progress" role="progressbar" aria-label="Basic example" aria-valuenow="50"
                            aria-valuemin="0" aria-valuemax="100">
                            <div class="progress-bar" style="width: 0%"></div>
                        </div>
                    </div>
                    <div class="col-lg-3 col-md-6 col-12 pe-0">
                        <h6 class="font-13 inter colorblack mb-0">Confirm</h6>
                        <i class="fa-solid fa-circle colorskyblue font-12"></i>
                        <div class="progress" role="progressbar" aria-label="Basic example" aria-valuenow="75"
                            aria-valuemin="0" aria-valuemax="100">
                            <div class="progress-bar" style="width: 0%"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <form method="POST" class="row" action="marketing1" enctype="multipart/form-data">
           @csrf

            <div class="col-lg-8 col-12">
                <div class="row">
                    <div class="col-12">
                        <div class="mb-3">
                            <label for="exampleFormControlInput1" class="form-label font-15 font-500 inter colorgray">
                                Offer Name* <i class="fa-solid fa-circle-exclamation"></i>
                            </label>
                            <input type="text" name="offer_name" class="form-control inputgroup" id="exampleFormControlInput1"
                                placeholder="">
                        </div>
                    </div>
                    <div class="col-lg-6 col-md-6 col-12">
                        <h6 class="font-15 font-500 inter colorblack text-center">Front Card</h6>
                        <div class="mb-3">
                            <label for="exampleFormControlInput1" class="form-label font-15 font-500 inter colorgray">
                                Offer Heading* <i class="fa-solid fa-circle-exclamation"></i>
                            </label>
                            <input type="text" name="offer_heading" class="form-control inputgroup"
                                id="exampleFormControlInput1" placeholder="E.g. Store grand opening day!">
                        </div>

                        <div class="mb-3">
                            <label for="exampleFormControlTextarea1" class="form-label font-15 font-500 inter colorgray">
                                Sub-Heading* <i class="fa-solid fa-circle-exclamation"></i>
                            </label>
                            <input class="form-control inputgroup" type="text" name="offer_subheading" style="resize: none;"
                                id="exampleFormControlTextarea1"
                                placeholder="E.g. Congratulations! Enjoy a free coffee at Donald's Cafe. Claim your discount now."
                                rows="5">
                        </div>
                        <div class="">
                            <label for="" class="form-label font-15 font-500 inter colorgray">Upload Image*
                                <i class="fa-solid fa-circle-exclamation"></i>
                            </label>
                            <div class="inputgroup1 p-3 text-center">
                                <label for="file">
                                    <div class="px-3 py-3 mb-3">
                                        <h6 class="font-15 font-500 inter colorblack mt-2 point">Drag & drop files or
                                            <span class="colorblue text-decoration-underline">Browse</span>
                                        </h6>
                                        <p class="mb-0 mt-2 font-12 colorgray inter point">Supported formats:<br> JPEG, PNG</p>
                                    </div>
                                </label>
                                <input name="offer_images[]" type="file" id="file" class="d-none" multiple>
                            </div>
                        </div>

                    </div>
                    <div class="col-lg-6 col-md-6 col-12">
                        <h6 class="font-15 font-500 inter colorblack text-center">Card Details</h6>
                        <div class="mb-3">
                            <label for="exampleFormControlInput1" class="form-label font-15 font-500 inter colorgray">
                                Website URL <i class="fa-solid fa-circle-exclamation"></i>
                            </label>
                            <input type="url" name="website_url" class="form-control inputgroup" id="exampleFormControlInput1"
                                placeholder="https://www.timelink.au">
                        </div>
                        <div class="mb-3">
                            <label for="exampleFormControlInput1" class="form-label font-15 font-500 inter colorgray">
                                Business Name*
                            </label>
                            <input type="text" name="business_name" class="form-control inputgroup"
                                id="exampleFormControlInput1" placeholder="">
                        </div>
                        <div class="mb-3">
                            <label for="exampleFormControlTextarea1" class="form-label font-15 font-500 inter colorgray">
                                The nitty-gritty stuff* <i class="fa-solid fa-circle-exclamation"></i>
                            </label>
                            <input type="text" name="gritty_stuff" class="form-control inputgroup" style="resize: none;"
                                id="exampleFormControlTextarea1" placeholder="" rows="5">
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-lg-4 col-12 mt-lg-0 mt-md-3 mt-3">
                <img src="{{ asset('admin/assets/imges/cafe.png') }}" class="w-100" alt="">
                <div class=" d-flex text-center justify-content-center mt-3 ">
                    <div class="form-check form-switch">
                        <input class="form-check-input" type="checkbox" role="switch"
                            id="flexSwitchCheckDefault">
                        <label class="form-check-label font-15 inter colorgray"
                            for="flexSwitchCheckDefault">Front</label>
                    </div>
                </div>
                <p class="font-12 inter colorgray">**Please note: This is for illustrative purposes only,
                    and the real style, design may differ.</p>
            </div>

            <div class="row">
                <div class="col-12 mt-5 mb-3 text-center">
                    <input type="submit" value="Save & Exit" class="btn-Rejected rounded-5 p-2 px-3 py-3 fw-medium font-14 text-capitalize me-lg-5">
                    <input type="submit" value="Next" class="btn-blue rounded-5 p-2 px-5 py-3 fw-medium font-14 text-capitalize">
                </div>
            </div>

        </form>
    </div>
</div>
@endsection
@section('scripts')
@endsection