@extends('master.master_back')
@section('title')
    ONM - Modifications des Comités
@endsection

@section('content')
<div class="page-content">
    <!--breadcrumb-->
    <div class="page-breadcrumb d-none d-sm-flex align-items-center mb-3">
        <div class="breadcrumb-title pe-3">Comités</div>
        <div class="ps-3">
            <nav aria-label="breadcrumb">
                <ol class="breadcrumb mb-0 p-0">
                    <li class="breadcrumb-item"><a href="{{ route('get.backend.dashboard') }}">Dashboard</a>
                    </li>
                    <li class="breadcrumb-item"><a href="{{ route('get.backend.list.center') }}">Liste des Comités</a>
                    </li>
                    <li class="breadcrumb-item active" aria-current="page">Modifier un Comité</li>
                </ol>
            </nav>
        </div>
    </div>
    <!--end breadcrumb-->
    <div class="card  card-bx mb-3">
        <div class="card-header mt-4">
            <h5 class="title">MODIFICATIONS DES INFORMATIONS</h5>
        </div>
        <form class="profile-form" id="edit_center" method="post" action="{{ route('post.backend.edit.center', $item->cb_id) }}" onsubmit="SendDataAnimation(event,'edit_center')">
            @csrf
            <div class="card-body">
                <div class="row">
                    <div class="col-sm-6 mb-3" id="content_center">
                        <label class="form-label">Nom du Comité</label>
                        <input type="text" class="form-control text-uppercase" name="name" value="{{ $item->cb_name }}"  placeholder="Center Espoir">
                    </div>
                    <div class="col-sm-6 mb-3">
                        <label class="form-label">Region</label>
                        <select class="form-control wide mh-auto select2" name="region" onchange="searchData(this.value,'{{ route('get.backend.departement.by.region') }}','departement')">
                            @if(isset($regions) && COUNT($regions) > 0)
                                @foreach ($regions as $key => $r)
                                    <option value="{{ $r->reg_id }}" {{ $r->reg_id == $item->reg_id ? 'selected' : '' }}>
                                        {{ $r->reg_name }}
                                    </option>
                                @endforeach
                            @endif
                        </select>
                    </div>
                    <div class="col-sm-6 mb-3">
                        <label class="form-label">Departement</label>
                        <select class="form-control select2" id="departement" name="departement">
                            @if(isset($departements) && COUNT($departements) > 0)
                                @foreach ($departements as $key => $d)
                                    <option value="{{ $d->dp_id }}" {{ $d->dp_id == $item->dp_id ? 'selected' : '' }}>
                                        {{ $d->dp_name }}
                                    </option>
                                @endforeach
                            @endif
                        </select>
                    </div>
                    <div class="col-sm-6 mb-3">
                        <label class="form-label">Arrondissement</label>
                        <select class="form-control wide mh-auto select2" id="arrondissement" name="arrondissement">
                            @if(isset($arrondissements) && COUNT($arrondissements) > 0)
                                @foreach ($arrondissements as $key => $arr)
                                    <option value="{{ $arr->arr_id }}" {{ $arr->arr_id == $item->arr_id ? 'selected' : '' }}>
                                        {{ $arr->arr_name }}
                                    </option>
                                @endforeach
                            @endif
                        </select>
                    </div>
                </div>
            </div>
            <div class="card-footer mb-3">
                <button type="submit" class="btn btn-light btn_submit">enregistrer</button>
            </div>
        </form>
    </div>
</div>
@endsection
@section('scripts')
<script>
    function searchData(value,url,div) {
        //var value = $("#matricule").val();
        //alert(value);
        $.ajax({
            type: "get",
            url: url,
            data: {
                search: value,
            },
            success: function (response) {
                console.log(response);
                if (response.code == 200) {
                    var options = '';
                    var j = response.data;
                    options += '<option value="">Selectionner un departement</option>';
                    for (var i = 0; i < j.length; i++) {
                        options += '<option value="' + j[i].dp_id + '">' + j[i].dp_name.toUpperCase() + '</option>';
                        console.log(options);
                    }
                    $('#'+div).html(options);
                } else {
                    $('#'+div).html($("<option></option>").attr("value", "").text(response.message.toUpperCase()));
                }
            },
        });
    }
    $(document).ready(function(){
        $('.upload__inputfile').on('change', function(){
            var data = $(this)[0].files;
            //alert(data)
            $.each(data, function(index, file){
                var filename=file.name;
                if(/(\.|\/)(gif|jpe?g|png)$/i.test(file.type)){
                    var fRead = new FileReader();
                    fRead.onload = (function(file){
                    return function(e) {
                    var img = $('<img/>').addClass('thumb').attr('src', e.target.result) .width(100)
                    .height(100).css("margin","3px"); //create image element
                    $('#preview_img').html(img).show();
                    };
                    })(file);
                    fRead.readAsDataURL(file); //URL representing the file's data.
                }
            });
        });
        var url = "{{ route('get.backend.arrondissement.by.departement') }}";
        $('#departement').on('change', function(){
            //alert($(this).val())
            $.ajax({
                type: "get",
                url: url,
                data: {
                    search: $(this).val(),
                },
                success: function (response) {
                    console.log(response);
                    if (response.code == 200) {
                        var options = '';
                        var j = response.data;
                        for (var i = 0; i < j.length; i++) {
                            options += '<option value="' + j[i].arr_id + '">' + j[i].arr_name.toUpperCase() + '</option>';
                            console.log(options);
                        }
                        $('#arrondissement').html(options);
                    } else {
                        $('#arrondissement').html($("<option></option>").attr("value", "").text(response.message.toUpperCase()));
                    }
                },
            });
        })
    })
</script>
@endsection