@extends('admin.main')
@section('content')
<div class="w-lg-80  py-4">
    <div class='d-flex justify-content-between align-items-center mb-3'>
        <div>
            <h3 class='font-20 font-900 text-black'>Loyalty Program</h3>
        </div>
        <a href="loyaltyProgram">
            <Button type='submit'
                class='btn-blue rounded-4 inter px-3 mt-2 p-2 w-100 fw-bold font-14 text-capitalize'><i
                    class="fa-solid fa-shop me-2"></i>New Program</Button>
        </a>
    </div>
    <div class="container bg-color p-3 rounded-4">

        <form method="POST" action="submit_loyalty">
            @csrf
            <div class="col-12">
                <div class="row">
                    <div class="col-12 mb-3">
                        <div class="mb-3">
                            <label for="exampleFormControlInput1"
                                class="form-label font-15 font-500 inter colorgray">Card Name*  <i class="fa-solid fa-circle-exclamation"></i></label>
                            <input type="text" name="card_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="row">
                            <div class="col-12">
                                <div class="mb-3">
                                    <label for="exampleFormControlInput1"
                                        class="form-label font-15 font-500 inter colorgray">Card Description*</label>
                                    <input type="text" name="description" class="form-control inputgroup"
                                        id="exampleFormControlInput1" placeholder="E.G. BUY 4 COFFEES, GET ONE FREE!">
                                </div>

                            </div>
                            <div class="col-lg-6">
                                <div class="mb-3">
                                    <label for="exampleFormControlInput1"
                                        class="form-label font-15 font-500 inter colorgray">Stamps*</label>
                                    <input type="text" name="stamp" class="form-control inputgroup"
                                        id="exampleFormControlInput1" placeholder="">
                                </div>

                            </div>
                            <div class="col-6">
                                <div class="mb-3">
                                    <label for="exampleFormControlInput1"
                                        class="form-label font-15 font-500 inter colorgray">Join Stamps  <i class="fa-solid fa-circle-exclamation"></i></label>
                                    <input type="text" name="join_stamp" class="form-control inputgroup"
                                        id="exampleFormControlInput1" placeholder="">
                                </div>
                            </div>
                            <div class="col-lg-8">
                                <div class="mb-3">
                                    <label for="exampleFormControlInput1"
                                        class="form-label font-15 font-500 inter colorgray">When to provide Additional stamps?  <i class="fa-solid fa-circle-exclamation"></i></label>
                                    <input type="text" name="whn_add_stamp" class="form-control inputgroup"
                                        id="exampleFormControlInput1" placeholder="">
                                </div>
                            </div>
                            <div class="col-lg-4">
                                <div class="mb-3">
                                    <label for="exampleFormControlInput1"
                                        class="form-label font-15 font-500 inter colorgray">How many?  <i class="fa-solid fa-circle-exclamation"></i></label>
                                    <input type="number" name="count" class="form-control inputgroup"
                                        id="exampleFormControlInput1" placeholder="">
                                </div>
                            </div>
                            <div class="col-lg-5">
                                <div class="mb-3">
                                    <label for="exampleFormControlInput1"
                                        class="form-label font-15 font-500 inter colorgray">Stamps until reward*</label>
                                    <input type="text" name="stmp_untl" class="form-control inputgroup"
                                        id="exampleFormControlInput1" placeholder="">
                                </div>
                            </div>
                            <div class="col-lg-7">
                                <div class="mb-3">
                                    <label for="exampleFormControlInput1"
                                        class="form-label font-15 font-500 inter colorgray">Private Card?*</label>
                                    <input type="text" name="private_card" class="form-control inputgroup"
                                        id="exampleFormControlInput1" placeholder="">
                                </div>
                            </div>
                            <div class="col-12">
                                <div class="mb-3">
                                    <label for="exampleFormControlInput1"
                                        class="form-label font-15 font-500 inter colorgray">Stamp Icon (Optional) </label>
                                    <input type="text" name="stamp_icon" class="form-control inputgroup"
                                        id="exampleFormControlInput1" placeholder="E.g. Store grand opening day!">
                                </div>
                            </div>
                            <div class="col-lg-8">
                                <div class="row">
                                    <div class="col-3">
                                        <div class="mb-3">
                                            <label for="exampleFormControlInput1"
                                                class="form-label font-15 font-500 inter colorgray"></label>
                                            <input type="text" class="form-control inputgroup"
                                                id="exampleFormControlInput1" placeholder="">
                                        </div>
                                    </div>
                                    <div class="col-3">
                                        <div class="mb-3">
                                            <label for="exampleFormControlInput1"
                                                class="form-label font-15 font-500 inter colorgray"></label>
                                            <input type="text" class="form-control inputgroup"
                                                id="exampleFormControlInput1" placeholder="">
                                        </div>
                                    </div>
                                    <div class="col-3">
                                        <div class="mb-3">
                                            <label for="exampleFormControlInput1"
                                                class="form-label font-15 font-500 inter colorgray"></label>
                                            <input type="text" class="form-control inputgroup"
                                                id="exampleFormControlInput1" placeholder="">
                                        </div>
                                    </div>
                                    <div class="col-3">
                                        <div class="mb-3">
                                            <label for="exampleFormControlInput1"
                                                class="form-label font-15 font-500 inter colorgray"></label>
                                            <input type="text" class="form-control inputgroup"
                                                id="exampleFormControlInput1" placeholder="">
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!-- <div class="mb-3">
                            <label for="exampleFormControlTextarea1"
                                class="form-label font-15 font-500 inter colorgray">Sub-Heading*</label>
                            <textarea class="form-control inputgroup" style="resize: none;"
                                id="exampleFormControlTextarea1"
                                placeholder="E.g. Congratulations! Enjoy a free coffee at Donald's Cafe. Claim your discount now."
                                rows="5"></textarea>
                        </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 ">
                                        <img src="/vendor/assets/imges/upload.png " width="60" alt="">
                                        <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
                                            formates: <br>
                                            JPEG, PNG</p>
                                    </div>
                                </label>
                                <input type="file" id="file" class="d-none">
                            </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</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">Offer Details*
                                <i class="fa-solid fa-circle-exclamation"></i></label>
                            <input class="form-control inputgroup" type="text" name="offer_details" style="resize: none;"
                                id="exampleFormControlTextarea1" placeholder="" rows="5">
                        </div>
                        <div class="row">
                            <div class="col-12">
                                <p class="font-14 inter colorgray mb-0">Select When and to Whom to Extend Your Loyalty Program (Optional)</p>
                                <div class="row mt-2">
                                    <div class="col-2 text-end">
                                        <p  class="font-14 inter colorgray mb-0">When?</p>
                                    </div>
                                    <div class="col-lg-3">
                                        <div class="form-check">
                                            <input class="form-check-input" value="Start of order" name="when" type="checkbox" value=""
                                                id="flexCheckDefault" />
                                            <label class="form-check-label font-12 Inter colorgray" for="flexCheckDefault">
                                                Start of order
                                            </label>
                                        </div>
                                        <div class="form-check">
                                            <input class="form-check-input" value="End of order" name="when" type="checkbox" value=""
                                                id="flexCheckDefault" />
                                            <label class="form-check-label font-12 Inter colorgray" for="flexCheckDefault">
                                                End of order
                                            </label>
                                        </div>
                                        <div class="form-check">
                                            <input class="form-check-input" value="Never" name="when" type="checkbox" value=""
                                                id="flexCheckDefault" />
                                            <label class="form-check-label font-12 Inter colorgray" for="flexCheckDefault">
                                                Never
                                            </label>
                                        </div>
                                        <div class="form-check">
                                            <input class="form-check-input" value="Anytime" name="when" type="checkbox" value=""
                                                id="flexCheckDefault" />
                                            <label class="form-check-label font-12 Inter colorgray" for="flexCheckDefault">
                                                Anytime
                                            </label>
                                        </div>
                                    </div>
                                    <div class="col-2 text-end">
                                        <p  class="font-14 inter colorgray mb-0">Who??</p>
                                    </div>
                                    <div class="col-lg-4">
                                        <div class="form-check">
                                            <input class="form-check-input" value="New-customers" name="who" type="checkbox" value=""
                                                id="flexCheckDefault" />
                                            <label class="form-check-label font-12 Inter colorgray" for="flexCheckDefault">
                                                New-customers
                                            </label>
                                        </div>
                                        <div class="form-check">
                                            <input class="form-check-input" value="Returning" name="who" type="checkbox" value=""
                                                id="flexCheckDefault" />
                                            <label class="form-check-label font-12 Inter colorgray" for="flexCheckDefault">
                                                Returning
                                            </label>
                                        </div>
                                        <div class="form-check">
                                            <input class="form-check-input" value="All" name="who" type="checkbox" value=""
                                                id="flexCheckDefault" />
                                            <label class="form-check-label font-12 Inter colorgray" for="flexCheckDefault">
                                                All
                                            </label>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                    </div>
                </div>
            </div>

        <div class="row">
            <div class="col-12 mb-3 text-center">
                <input type="submit" value="Next" class='btn-Rejected rounded-5 px-3 p-2 fw-medium font-14 text-capitalize me-lg-5'>
                <input type="submit" value="Next" class='btn-blue rounded-5 px-5 p-2 fw-medium font-14 text-capitalize'  data-bs-toggle="modal" data-bs-target="#exampleModalone">

            </div>
             <!-- Modal -->

        </form>
        </div>
    </div>
</div>

@endsection
@section('scripts')


@endsection