@extends('layouts.app', ['activePage' => 'governorate', 'titlePage' => __('')])

<style>
    table {
        border-collapse: collapse;
        width: 100%;
    }

    th, td {
        border: 1px solid #dddddd;
        text-align: left;
        padding: 8px;
    }

    th {
        background-color: #f2f2f2;
    }
</style>

@section('content')
    <div class="content">
        <div class="container-fluid">
            <div class="row">
                <div class="col-md-12">
                    <div class="card">
                        <div class="card-header card-header-primary">
                            <div class="d-flex justify-content-between">
                                <div>
                                    <h4 class="card-title">{{ __("jamia.gov")}}</h4>
                                </div>
                                <div>
                                    <a class="btn btn-success" href="/governorate"><strong><i class="fa fa-backward fa-lg"></i></strong></a>
                                </div>
                            </div>
                        </div>
                        <div class="card-body p-4">
                            <form action="/governorate/update" method="post" enctype="multipart/form-data">
                                @csrf
                                <input type="hidden" name="governorate_id" value="{{$gov->id}}">
                                <div class="row">
                                    <div class="col-md-12 eng_sh">
                                        <div class="form-group">
                                            <label for="parentDetails">{{ __("jamia.governorate")}}</label>
                                            <input type="text" id="governorate" name="governorate" class="form-control" value="{{$gov->governorate}}" required>
                                        </div>
                                    </div>

                                    <div class="col-md-8 eng_sh">
                                        <h5>{{ __("jamia.area")}}</h5>
                                        <div id="childrenDetails" style="display: flex;">
                                            <input type="text" id="area" name="area[]" class="form-control" placeholder='Name' >
                                            &nbsp; &nbsp; &nbsp; &nbsp;
                                            <input type="number" step="any" id="price" name="price[]" class="form-control" placeholder='Shipping cost' >

                                            <button type="button" class="btn btn-success addChild" style="margin-left: 84px;"><i class="fa fa-plus"></i> Add {{ __("jamia.area")}}</button>
                                        </div>
                                        @if($area->count() != 0)
                                            <div class="table-responsive">
                                                <table class="table" id="data-table">
                                                    <thead>
                                                    <th>Area</th>
                                                    <th>Price</th>
                                                    <th>Actions</th>
                                                    </thead>
                                                    <tbody>
                                                    @foreach($area as $ar)
                                                        <tr>
                                                            <td>{{$ar->area_name}}</td>
                                                            <td>{{$ar->price}}</td>
                                                            <td>
                                                                <button type="button" class="btn btn-primary btn-sm editArea" data-area-id="{{$ar->id}}"><i class="fa fa-edit"></i> Edit</button>
                                                            </td>
                                                        </tr>
                                                    @endforeach
                                                    </tbody>
                                                </table>
                                            </div>
                                        @endif
                                    </div>

                                    <div class="col-md-12 p-3">
                                        <input type="submit" value="{{ __("jamia.add") }}" class="btn btn-primary">
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Common Popup for Create/Edit Area -->
    <div class="modal fade" id="areaModal" tabindex="-1" role="dialog" aria-labelledby="areaModalLabel" aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="areaModalLabel">{{ __("jamia.area")}}</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <!-- Form for creating/editing area -->
                    <form id="areaForm" action="{{url('/govermorate/area/update')}}" method="get">
                        @csrf
                        @method('get')
                        <input type="hidden" id="areaId" name="areaId">
                        <div class="form-group">
                            <label for="areaName">{{ __("jamia.area")}}</label>
                            <input type="text" id="areaName" name="areaName" class="form-control">
                        </div>


                        <div class="form-group">
                            <label for="areaName">{{ __("jamia.price")}}</label>
                            <input type="text" id="priceShiipin" name="price" class="form-control">
                        </div>



                        <button type="submit" class="btn btn-primary saveArea">{{ __("jamia.add") }}</button>
                    </form>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('js')
    <script>
        $(document).ready(function() {
            var childIndex = 1;

            $(".addChild").click(function() {
                var childHtml = "<div class='form-group d-flex'>" +
                    "<input type='text' id='area' name='area[]' class='form-control' placeholder='name'>" +

                    "&nbsp;&nbsp;<input type='number'  step='any' id='price' name='price[]' class='form-control' placeholder='Shipping cost'>" +
                    "<button type='button' class='delete_img btn-danger ml-2'><i class='fa fa-trash' ></i></button>" +
                    "</div>";

                $("#childrenDetails").after(childHtml);
                childIndex++;
            });

            $(document).on("click", ".delete_img", function() {
                // Remove the closest parent element with class 'form-group'
                $(this).closest('.form-group').remove();
            });

            // Open the area modal for editing
            $(document).on("click", ".editArea", function() {
                var areaId = $(this).data("area-id");
                var areaName = $(this).closest('tr').find('td:first-child').text();
                var price = $(this).closest('tr').find('td:nth-child(2)').text(); // Corrected selector

                console.log(price);
                // Populate the area modal with current area details
                $("#areaId").val(areaId);
                $("#areaName").val(areaName);
                $("#priceShiipin").val(price);
                var arNm = $("#areaName").val();
                // var price = $("#price").val();
                $.get("{{url('/govermorate/area/update')}}", {areaId:areaId,areaName:areaName,price:price}, function(resNames) {


                },"json");
                // Show the modal
                $("#areaModal").modal("show");
            });
            $(document).on("click", ".saveArea", function() {
                var areaName = $("#areaName").val();
                var areaId = $("#areaId").val();
                $.get("{{url('/govermorate/area/update')}}", {areaId:areaId,areaName:areaName}, function(resNames) {


                },"json");
                // Show the modal
                $("#areaModal").modal("hide");
            });


        });
    </script>
@endsection