@extends('public.layout.app')

@section('title', 'Kashmir Campaign')

@section('content')
<style>
    .select2-container{
        width:100% !important;
    }
    .select2-container--default .select2-selection--single {
        border-radius: 7px !important;
    }
    .select2-container .select2-selection--single {
        height: 37px !important;
    }
    .select2-container .select2-selection--single .select2-selection__rendered {
        font-size: 16px !important;
        padding-left: 10px !important;
    }
    .select2-container--default .select2-selection--single .select2-selection__rendered {
        color: #040404;
        line-height: 36px !important;
    }
    .select2-container--default .select2-selection--single .select2-selection__arrow {
        top: 6px !important;
    }
    .select2-container--default .select2-selection--single .select2-selection__placeholder {
        color: #090909 !important;
        font-weight: 400 !important;
    }
    .select2-container--default .select2-search--dropdown .select2-search__field {
        font-size: 16px !important;
    }
    .select2-results {
        font-size: 16px !important;
        color: black !important;
    }
</style>
@if(now() > \Carbon\Carbon::createFromFormat('Y-m-d', '2025-04-16'))
<div class="text-center">
    <h1 class="title fw-bold mb-4">
        <div class="yellow-color">THE SHOP & WIN PROMOTION IS NOW CLOSED</div>
    </h1>
    <h2 class="title fw-bold">
        THANK YOU FOR PARTICIPATING.
    </h2>
    <h2 class="title fw-bold mb-4">
        STAY TUNED FOR EXCITING UPDATES.
    </h2>
    <h3 class="urdu yellow-color fs-35 mb-4">
        کی پروموشن کا اختتام ہو چکا ہے۔ <span style="margin-left: 5px;">Shop & Win</span>
    </h3>
    <h3 class="urdu fs-35 mb-4">
        آپ کی شرکت کا شکریہ، مزید معلومات کے لیے ہمارے ساتھ رہیں۔
    </h3>
    <a href="{{ route('winners') }}" class="register-btn btn mt-3 ms-2">SEE WINNERS</a>
</div>
<div class="social-media mt-5">
    <div class="social-media-wrap fs-15">
        <a class="insta" href="https://www.instagram.com/kashmircookingoil"><span>@kashmircookingoil</span></a>
        <a class="facebook" href="https://www.facebook.com/KashmirCookingOil"><span>@KashmirCookingOil</span> </a>
        <a class="youtube" href="https://www.youtube.com/c/KashmirCookingOil"><span>@kashmircookingoil</span></a>
        <a class="tiktok" href="https://www.tiktok.com/@kashmircookingoil"><span>@kashmircookingoil</span></a>
        <a class="website" href="https://uil.com.pk"><span>www.uil.com.pk</span></a>
    </div>
</div>
@else
<form method="POST" action="{{ route('participant.store') }}" id="participant-form" role="form" enctype="multipart/form-data">
    @csrf
    <div class="row">
        <div class="col-xxl-6 mb-4 thankyou-100">
            <h1 class="apply title fw-bold">
                <div class="yellow-color">HELLO, WELCOME!</div>
                IT'S YOUR TIME TO WIN BIG WITH KASHMIR!
            </h1>
            <p class="apply title-p fs-22 text-center text-xxl-start info-urdu mb-4">Please fill the following details with the relevant information to participate!
                <span class="malumat urdu fs-22"> !لکی ڈرا میں شامل ہونے کے لیے دی گئی معلومات کو مکمل کریں</span>
            </p>
            <div class="apply promo-code-mobile d-xxl-none text-center">
                <img src="{{ asset('assets/web/images/promo-code-mobile.png') }}" loading="lazy" alt="Promo Code Mobile">
            </div>
            <div class="confirmed">
                <h1 class="title yellow-color fs-58 text-uppercase fw-bold mb-4">
                    <div>Thank you so much for</div>
                    <div>providing the information!</div>
                </h1>
                <h2 class="title fw-bold fs-38 text-uppercase mb-4">
                    <div>Your entry is confirmed!</div>
                    <div>Stay tuned, you could be our next</div>
                    <div>lucky winner. <span class="yellow-color">Good luck!</span></div> 
                </h2>
                <div class="urdu text-end fs-22">
                    <p> !آپ کی انٹری کا اندراج ہو چکا ہے </p>
                    <p>ہمارے ساتھ رہیں، ہو سکتا ہے آپ ہی ہمارے اگلے لکی ونر ہوں۔</p>
                    <p class="yellow-color"> !ہماری نیک تمنائیں آپ کے ساتھ ہیں</p>
                </div>
                <a href="" class="register-btn btn mt-4">Register Another Participant</a>
            </div>
            <div class="thankyou">
                <h1 class="title yellow-color fs-58 text-uppercase fw-bold mb-4">
                    <div>The Shop & Win Promotion Is Now Closed</div>
                </h1>
                <h2 class="title fw-bold fs-38 text-uppercase mb-4">
                    <div>Thank you for participating.</div>
                    <div>stay tuned for exciting updates.</div> 
                </h2>
                <div class="urdu text-end fs-22 ">
                    <p class="yellow-color">! کی پرمیشن کا اختتام ہو چکا ہے  Shop & Win </p>
                    <p> آپ کی شرکت کا شکریہ - مزید معلومات کے لیے ہمارے ساتھ رہیں۔ </p>
                </div>
            </div>
            <div class="apply row">
                <div class="col-xxl-6">
                    <div class="mb-4">
                        <label for="name" class="form-label fs-20">Full Name/ <span class="urdu">مکمل نام</span></label>
                        {{ Form::text('name', $participant->name, ['class' => 'form-control' . ($errors->has('name') ? ' is-invalid' : ''), 'required']) }}
                        {!! $errors->first('name', '<div class="invalid-feedback">:message</div>') !!}
                    </div>
                </div>
                <div class="col-xxl-6">
                    <div class="mb-4">
                        <label for="uniqueCode" class="form-label fs-20">Unique Code/ <span class="urdu">یونیک کوڈ</span></label>
                        {{ Form::text('coupon', $participant->coupon, ['class' => 'form-control' . ($errors->has('coupon') ? ' is-invalid' : ''), 'required']) }}
                        {!! $errors->first('coupon', '<div class="invalid-feedback">:message</div>') !!}
                    </div>
                </div>
                <div class="col-xxl-6">
                    <div class="mb-4">
                        <label for="cnic" class="form-label fs-20">CNIC No./ <span class="urdu">قومی شناختی کارڈ نمبر</span></label>
                        {{ Form::text('cnic', $participant->cnic, ['class' => 'form-control' . ($errors->has('cnic') ? ' is-invalid' : ''), 'required', 'id' => 'cnic']) }}
                        {!! $errors->first('cnic', '<div class="invalid-feedback">:message</div>') !!}
                    </div>
                </div>
                <div class="col-xxl-6">
                    <div class="mb-4">
                        <label for="gender" class="form-label fs-20">Gender / <span class="urdu">جنس</span></label>
                        {{ Form::select('gender', ['Male' => 'Male', 'Female' => 'Female'], $participant->gender, ['class' => 'form-control form-select' . ($errors->has('gender') ? ' is-invalid' : ''), 'placeholder' => '--Select--','required']) }}
                        {!! $errors->first('gender', '<div class="invalid-feedback">:message</div>') !!}
                    </div>
                </div>
                <div class="col-xxl-6">
                    <div class="mb-4">
                        <label for="city" class="form-label fs-20">City/ <span class="urdu">شہر کا نام</span></label>
                        {{ Form::select('city_id', cities(), $participant->city_id, ['class' => 'form-control select2' . ($errors->has('city_id') ? ' is-invalid' : ''), 'placeholder' => '--Select--', 'required', 'id' => 'city']) }}
                        {!! $errors->first('city_id', '<div class="invalid-feedback">:message</div>') !!}
                    </div>
                </div>
                <div class="col-xxl-6">
                    <div class="mb-4">
                        <label for="mobile_number" class="form-label fs-20">Mobile No/ <span class="urdu">موبائل نمبر</span></label>
                        {{ Form::text('mobile_number', $participant->mobile_number, ['class' => 'form-control' . ($errors->has('mobile_number') ? ' is-invalid' : ''), 'required', 'id' => 'mobile_number']) }}
                        {!! $errors->first('mobile_number', '<div class="invalid-feedback">:message</div>') !!}
                    </div>
                </div>
                <div class="col-12">
                    <div class="mb-4">
                        <label for="completeAddress" class="form-label fs-20">Complete Address/ <span class="urdu">مکمل پتہ</span></label>
                        {{ Form::text('address', $participant->address, ['class' => 'form-control' . ($errors->has('address') ? ' is-invalid' : ''), 'required']) }}
                        {!! $errors->first('address', '<div class="invalid-feedback">:message</div>') !!}
                    </div>
                </div>
            </div>
        </div>
        <div class="col-xxl-6">
            <div class="apply confirmed gift"></div>
            <div class="apply promo-code d-none d-xxl-block"></div>
        </div>
        <div class="col-12 text-center text-xxl-start mb-5 apply">
            <div class="check-box-area text-start mb-3">
                <div class="form-check fs-30">
                    <input class="form-check-input{{ $errors->has('terms') ? ' is-invalid' : '' }}" 
                           type="checkbox" 
                           value="1" 
                           id="flexCheckDefault" 
                           name="terms" 
                           required 
                           {{ old('terms') ? 'checked' : '' }}>
                    <label class="form-check-label yellow-color" for="flexCheckDefault">
                        I agree to all the terms and conditions mentioned below.
                        <div class="urdu yellow-color fs-20 text-end" style="direction: rtl;">
                            میں نیچے دی گئی تمام شرائط و ضوابط سے متفق ہوں۔
                        </div>
                    </label>
                    {!! $errors->first('terms', '<div class="invalid-feedback">:message</div>') !!}
                </div>
            </div>
            <button type="submit" class="register-btn btn mt-3 me-2">REGISTER</button>
            {{-- <a href="{{ route('winners') }}" class="register-btn btn mt-3 ms-2">SEE WINNERS</a> --}}
        </div>
    </div>

    <div class="apply row mb-4">
        <div class="col">
            <h2 class="yellow-color fs-40 text-uppercase">Terms & Conditions:</h2>
            <ul>
                <li>The campaign is valid only for the specified duration mentioned in the campaign
                    (from
                    15th
                    January to 31st March, 2025).</li>
                <li>Participants must meet all eligibility requirements to qualify for the draw.</li>
                <li>The company reserves the right to verify the authenticity of entries and disqualify
                    any
                    participant who submits invalid or fraudulent information.</li>
                <li>Prizes are non-transferable, non-refundable, and cannot be exchanged for cash or
                    other
                    alternatives.</li>
                <li>The gifts may vary in color, design, and brands from their visual representation.
                </li>
                <li>No employee of UIL or any of its affiliated companies, as well as any company
                    partner,
                    is
                    eligible to participate in this lucky draw.</li>
                <li>The company will not be held liable for any scam calls or fraudulent activities made
                    on
                    behalf of the competition. Only official company representatives will contact
                    participants
                    if they have been shortlisted. Participants are advised to verify the authenticity
                    of
                    any
                    communication.</li>
                <li>Failure to adhere to these terms may result in disqualification.</li>
                <li>The company retains sole discretion to modify, amend, or terminate the promotion at
                    any
                    time without prior notice.</li>
                <li>The company reserves the right to change the rules, prize details, or any other
                    aspect
                    of
                    the campaign if deemed necessary.</li>
                <li>By participating in this promotion, participants agree to fully comply with all
                    terms
                    and
                    conditions set by the company. Decisions made by the company will be final and
                    binding
                    on
                    the participants.</li>
            </ul>
        </div>
    </div>
    <div class="apply row mb-4">
        <div class="col">
            <h2 class="urdu yellow-color fs-35 mb-4 text-end">:شرائط و ضوابط</h2>
            <ul class="urdu urdu-role fs-20">
                <li> یہ مہم مخصوص دورانیہ کے لیے ہے۔ (15 جنوری سے 31 مارچ 2025 تک)</li>
                <li> لکی ڈرا میں شامل ہونے کے لیے تمام تر اہلیت کا پورا ہونا لازمی ہے۔</li>
                <li> کمپنی کسی بھی اندراج کو جانچنے اور نااہل کرنے کا حق رکھتی ہے۔ دھوکہ پر مبنی، غلط اور نامکمل معلومات والے افراد کو شامل نہیں کیا جائے گا۔</li>
                <li> انعامات ناقابل منتقلی، ناقابلِ واپسی اور کیش یا کسی اور صورت میں تبدیل نہیں کیے جائیں گے۔</li>
                <li>دیے جانے والے انعامات رنگ، ڈیزائن اور برانڈ میں دکھائی جانے والی تصویر سے مختلف ہو سکتے ہیں۔</li>
                <li> UIL کسی بھی مشترکہ کمپنیز کے ملازمین اور کمپنی کے حصے دار اس لکی ڈرا میں حصہ نہیں لے سکتے۔</li>
                <li>کسی بھی دھوکہ دہی، فریب پر مبنی سرگرمی کو قابل قبول نہیں کیا جائے گا۔ کمپنی کا منتخب کردہ نمائندہ آپ کے منتخب ہونے کے بعد آپ سے رابطہ کرے گا۔ اس مہم میں شامل ہونے والے افراد سے گزارش ہے کہ کسی بھی دھوکے سے بچنے کے لیے رابطہ کرنے والے فرد کی تصدیق لازمی کرلیں۔</li>
                <li> دی گئی شرائط پر عمل نہ کرنے کی صورت میں آپ کو نااہل کیا جا سکتا ہے۔</li>
                <li>کمپنی ہی ترمیم یا پروموشن کو کسی بھی وقت ختم کرنے کا حق محفوظ رکھتی ہے۔</li>
                <li> کمپنی کسی بھی قواعد، انعام کو تبدیل کرنے اور مہم کے کسی بھی پہلو کو ضروری سمجھنے پر تبدیل کر سکتی ہے۔</li>
                <li>اس پروموشن میں شامل ہونے والے تمام افراد کو کمپنی کی طرف سے دیے گئے قواعد و ضوابط کو ماننا ضروری ہے۔</li>
                <li> کمپنی کی طرف سے کیا گیا فیصلہ حتمی ہوگا اور آپ کو اس پر پابند رہنا ہوگا۔</li>
            </ul>
        </div>
    </div>
    <div class="confirmed thankyou social-media mt-5">
        <div class="social-media-wrap fs-15">
            <a class="insta" href="https://www.instagram.com/kashmircookingoil"><span>@kashmircookingoil</span></a>
            <a class="facebook" href="https://www.facebook.com/KashmirCookingOil"><span>@KashmirCookingOil</span> </a>
            <a class="youtube" href="https://www.youtube.com/c/KashmirCookingOil"><span>@kashmircookingoil</span></a>
            <a class="tiktok" href="https://www.tiktok.com/@kashmircookingoil"><span>@kashmircookingoil</span></a>
            <a class="website" href="https://uil.com.pk"><span>www.uil.com.pk</span></a>
        </div>
    </div>
</form>
@endif
@endsection

@section('script')
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

<script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.3/jquery.validate.min.js"></script>

<!-- Select2 JS -->
<script src="https://cdn.jsdelivr.net/npm/select2@4.0.13/dist/js/select2.min.js"></script>
<!-- Inputmask CSS and JS -->
<script src="https://cdn.jsdelivr.net/npm/inputmask@5.0.8/dist/inputmask.min.js"></script>
<script>
    $(document).ready(function() {
        $('.select2').select2({
            placeholder: "--Select--",
            allowClear: true
        });


        @if(session('success'))
            $("body").removeClass("apply").addClass("confirmed");
        @endif
        // Mobile Number Mask
        var mobileMask = '0399-9999999';
        Inputmask(mobileMask, {
            placeholder: '_',       
            clearMaskOnLostFocus: true,
            showMaskOnHover: false
        }).mask('#mobile_number');
    
        // CNIC Mask
        var cnicMask = '99999-9999999-9';
        Inputmask(cnicMask, {
            placeholder: '_',
            clearMaskOnLostFocus: true
        }).mask('#cnic');
    });
</script>
@endsection