@extends("layout.app")
@section("styles")
    <link href="https://cdn.ihouse.ps/css/select2.min.css" rel="stylesheet" type="text/css" media="all"/>
    <link rel="stylesheet"
          href="https://cdn.jsdelivr.net/npm/@ttskch/select2-bootstrap4-theme@1.2.3/dist/select2-bootstrap4.min.css">
@endsection
@section("content")
    <section class="bg--secondary space--sm">
        <div class="container">
            @if(request()->get("source")=="checkout")
                <div class="row">
                    <div class="col-md-4 col-md-offset-4">
                            <div class="text-right mb-4">
                                <a class="btn btn-success" href="{{route("cart")}}">الرجوع لتأكيد الشراء</a>
                            </div>

                    </div>
                </div>
            @endif

            <div class="row">
                @include("customers.aside")
                <div class="col-lg-9">
                   @include("customers.messages")
                    <div class="boxed boxed--lg boxed--border">
                        <div id="addresses">
                            <h4>عناويني</h4>

                                @forelse($addresses as $address)
                                <hr style="border-color: #1f1f1f;">
                                <form action="{{route("customers.addresses.update",$address->id)}}" method="post">
                                    {{method_field("put")}}
                                    {{csrf_field()}}
                                    <div class="row">
                                        <div class="col-md-6">
                                            <label>العنوان</label>
                                            <input type="text" class="max-length" maxlength="50" name="address" value="{{$address->address}}">
                                            <span style="color: red" id="max-length-hint"></span>

                                            <input type="hidden" name="source" value="{{request()->get("source")}}">
                                        </div>
                                        <div class="col-md-6">
                                            <label>المبنى:</label>
                                            <input type="text" maxlength="50" class="max-length" name="building" value="{{$address->alt_address}}">
                                            <span style="color: red" id="max-length-hint"></span>
                                        </div>

                                        <div class="col-md-6">
                                            <label>المنطقة:</label>
                                            <div>
                                                <select name="town" class="town">
                                                    <option value="">اختر المنطقة</option>
                                                    @foreach($cities as $city)
                                                        <optgroup label="{{$city->title}}">
                                                            @foreach($city->towns()->where("is_active",1)->get() as $town)
                                                            <option @if($town->id==$address->town_id) selected @endif value="{{$town->id}}">{{$town->title}}</option>
                                                            @endforeach
                                                        </optgroup>
                                                    @endforeach
                                                </select>
                                            </div>

                                        </div>
                                        <div class="col-md-12">
                                            <div class="input-radio">
                                                <span class="input__label">العنوان الاساسي</span>
                                                <input type="radio" class="is-default" name="is_default" value="1" @if($address->is_default) checked @endif>
                                                <label for="radio-1"></label>
                                                <p class="type--fine-print">سيتم إختيار العنوان الاساسي عند الطلب السريع</p>
                                            </div>

                                        </div>

                                        <div class="col-md-12">
                                            <label>ملاحظات:</label>
                                            <textarea  name="notes">{{$address->notes}}</textarea>
                                        </div>


                                        <div class="col-lg-3 col-md-4">
                                                <button type="submit" class="btn btn--primary type--uppercase">حفظ</button>
                                            </div>
                                            <div class="col-lg-3 col-md-4">
                                                <button type="submit" name="btn" value="delete" class="btn bg--error type--uppercase">حذف</button>
                                            </div>
                                        </div>
                                </form>
                                   @empty
                                <h4 class="text-center">لا يوجد عناوين مضافه</h4>
                                   @endforelse

                            <hr style="border-color: #1f1f1f;">
                            <h4>إضافة عنوان جديد</h4>


                            <form action="{{route("customers.addresses.post")}}" method="post">
                                {{csrf_field()}}

                                <div class="row">
                                    <div class="col-md-6">
                                        <label>المنطقة:</label>
                                        <div>
                                            <select name="town" class="town">
                                                <option value="">اختر المنطقة</option>
                                                @foreach($cities as $city)
                                                    <optgroup label="{{$city->title}}">
                                                        @foreach($city->towns()->where("is_active",1)->get() as $town)
                                                            <option value="{{$town->id}}">{{$town->title}}</option>
                                                        @endforeach
                                                    </optgroup>
                                                @endforeach
                                            </select>
                                        </div>

                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-md-6">
                                        <label>الشارع</label>
                                        <input  maxlength="50" class="max-length" type="text" name="address">
                                        <span style="color: red" id="max-length-hint"></span>
                                    </div>
                                    <div class="col-md-6">
                                        <label>المبنى:</label>
                                        <input type="text"  maxlength="50" class="max-length" name="building">
                                        <span style="color: red" id="max-length-hint"></span>

                                        <input type="hidden" name="source" value="{{request()->get("source")}}">

                                    </div>

                                    <div class="col-md-12">
                                        <div class="input-radio">
                                            <span class="input__label">العنوان الاساسي</span>
                                            <input type="radio" class="is-default" name="is_default" value="1">
                                            <label for="radio-1"></label>
                                            <p class="type--fine-print">سيتم إختيار العنوان الاساسي عند الطلب السريع</p>
                                        </div>

                                    </div>

                                    <div class="col-md-12">
                                        <label>ملاحظات:</label>
                                        <textarea  name="notes"></textarea>
                                    </div>

                                    <div class="col-lg-3 col-md-4">
                                        <button type="submit" class="btn btn--primary type--uppercase">إضافة</button>
                                    </div>
                                </div>
                            </form>

                        </div>
                    </div>
                </div>
            </div>
            <!--end of row-->
        </div>
        <!--end of container-->
    </section>
@endsection
@section("scripts")
    <script src="https://cdn.ihouse.ps/js/select2.min.js"></script>
    <script>
        $(document).ready(function () {
            $('.town').select2({
                theme: 'bootstrap4'
            });
        });
    </script>
    <script>
        $(document).ready(function () {
            $(".is-default").click(function () {
                $(".is-default").prop("checked", false);
                $(this).prop("checked",true);
            });
            $("input[maxlength]").keyup(function () {
                var max = 50; // Set the maximum character limit
                if ($(this).val().length >= max) {
                    var hintElement = $(this).siblings('span');
                    hintElement.text("الحد الاقصى لعدد الاحرف هو 50 حرف");
                    // Set a timeout to clear the text
                    setTimeout(function() {
                        hintElement.text("");
                    }, 3000); // Clears the text after 3 seconds (3000 milliseconds)
                }
            });

        });

    </script>
@endsection