@extends('layouts.app')
@section('content')
<div class="flex items-center flex-wrap justify-between gap20 mb-30">
    <h3>Branch infomation</h3>
    <ul class="breadcrumbs flex items-center flex-wrap justify-start gap10">
        <li>
            <a href="javascript:void(0)"><div class="text-tiny">Dashboard</div></a>
        </li>
        <li>
            <i class="icon-chevron-right"></i>
        </li>
        <li>
            <a href="#"><div class="text-tiny">Branch</div></a>
        </li>
        <li>
            <i class="icon-chevron-right"></i>
        </li>
        <li>
            <div class="text-tiny">Branch infomation</div>
        </li>
    </ul>
</div>
<!-- new-branch -->
<div class="wg-box">
    <form class="form-new-product form-style-1" method="post" action="{{route('shop-bo.branches.update',['id'=>$branch->id])}}" enctype="multipart/form-data">
        @csrf
        @honeypot
        {{--<fieldset>
            <div class="body-title">Province <span class="tf-color-1">*</span></div>
            <input class="flex-grow  @error('province') is-invalid @enderror" type="text" placeholder="Province" name="province" value="{{$branch->province}}">
            @error('province')
                <span class="invalid-feedback" role="alert">
                    <strong>{{ $message }}</strong>
                </span>
            @enderror
        </fieldset>
        <fieldset>
            <div class="body-title">City <span class="tf-color-1">*</span></div>
            <input class="flex-grow  @error('city') is-invalid @enderror" type="text" placeholder="City" name="city" value="{{$branch->city}}">
            @error('city')
                <span class="invalid-feedback" role="alert">
                    <strong>{{ $message }}</strong>
                </span>
            @enderror
        </fieldset>--}}

        <fieldset class="mb-24">
            <div class="body-title">Province</div>
            <div class="select flex-grow">
                <select class="@error('province') is-invalid @enderror" id="province" name="province">
                </select>
                @error('province')
                    <span class="invalid-feedback" role="alert">
                        <strong>{{ $message }}</strong>
                    </span>
                @enderror
            </div>
        </fieldset>
        <fieldset class="mb-24">
            <div class="body-title">City</div>
            <div class="select flex-grow">
                <select class="@error('city') is-invalid @enderror" id="city" name="city">
                </select>
                @error('city')
                    <span class="invalid-feedback" role="alert">
                        <strong>{{ $message }}</strong>
                    </span>
                @enderror
            </div>
        </fieldset>
        <fieldset>
            <div class="body-title">Threshold</div>
            <input class="flex-grow  @error('threshold') is-invalid @enderror" type="text" placeholder="Threshold" name="threshold" value="{{$branch->threshold}}" oninput="this.value=this.value.replace(/[^0-9]/g,'')">
            @error('threshold')
                    <span class="invalid-feedback" role="alert">
                    <strong>{{ $message }}</strong>
                </span>
            @enderror
        </fieldset>
        <div class="bot">
            <div></div>
            <button class="tf-button w208" type="submit">Save Changes</button>
        </div>
    </form>
</div>
<!-- /new-branch -->

@endsection
@section('page_script')
@parent
<script>
    $(".branch-menu").addClass("active");
</script>

<script>
    $(".branches-menu").addClass("active");
    $(".branches-index").addClass("active");

    var region_id           = '{{Crypt::encrypt($province->region_id)}}';
    var province_select     = $('#province');
    var city_select         = $('#city');

    $.ajax({
        'url'       : '{{route("shop-bo.get-provinces")}}/',
        'success'   : function(response){
            response.forEach(function(province,key){
                let option = new Option(province.text, province.id);
                province_select.append(option);
            })
            province_select.find('option:first').prop('selected', true).trigger('change');
        }
    })

    province_select.change(function(){
        let province_id       = $(this).val();
        console.log(province_id)
        city_select.empty();
        $.ajax({
            'url'       : '{{route("shop-bo.get-municipalities")}}/'+province_id,
            'success'   : function(response){
                response.forEach(function(municipality,key){
                    let option = new Option(municipality.text, municipality.id);
                    city_select.append(option);
                })
                city_select.find('option:first').prop('selected', true);
            }
        })
    })
</script>
@endsection
<!-- App js -->