@extends('main')
@section('css')
    <style>
    .nav-pills .nav-link.active, .nav-pills .show>.nav-link{
        color: #fff;
        background-color: #D85D2A;
    }
    </style>
@endsection
@section('content')
    <!-- Content Header (Page header) -->
    <section class="content-header">
        <h1>
        </h1>
        <ol class="breadcrumb">

        </ol>
    </section>

    <!-- Main content -->
    <section class="content">
        <div class="row">
            <div class="col-md-3">
                <div class="card card-orange card-outline">
                    <div class="card-header">
                        <h3 class="card-title">Select Panel</h3>
                        <div class="card-tools">
                            <button type="button" class="btn btn-tool" data-card-widget="collapse">
                                <i class="fas fa-minus"></i>
                            </button>
                        </div>
                    </div>
                    <div class="card-body p-0 ">
                        <ul class="nav nav-pills flex-column">
                            <li class="nav-item">
                                <a class="nav-link"  href="#activity" data-toggle="tab">
                                    <i class="fas fa-money-bill-alt"></i> EXCHANGE RATE
                                </a>
                            </li>

                            <li class="nav-item">
                                <a class="nav-link" href="#setup" data-toggle="tab">
                                    <i class="fas fa-money-bill-alt"></i> VAT CURRENT
                                </a>
                            </li>


                            <li class="nav-item">
                                <a class="nav-link" href="#areas" data-toggle="tab">
                                    <i class="fas fa-money-bill-alt"></i> Areas
                                </a>
                            </li>

                        </ul>
                    </div>
                    <!-- /.card-body -->
                </div>
                <!-- /.card -->
            </div>
            <!-- /.col -->
            <div class="col-md-9">
                <div class="tab-content card-orange card-outline">
                    <div id="activity"  class="card  tab-pane active  inline_card_change exhange_rate_tab"></form>
                    <div class="card-header">
                        <h3 class="card-title">Exchange Rate</h3>
                    </div>

                        <div class="row px-2 py-2">
                            <div class="col-12 col-sm-6">
                                <div class="info-box bg-light">
                                    <div class="info-box-content">
                                        <span class="info-box-number text-lg text-center text-red text-bold text-muted">1 USD</span>
                                        <span class="info-box-text text-center text-bold text-muted">Equivalent to</span>
                                        <span class="info-box-number text-lg text-center text-bold text-blue mb-0">{{$vars['rate']->online_rate}} TZS</span>
                                    </div>
                                </div>
                            </div>
                            <div class="col-12 col-sm-6">
                                <div class="info-box bg-light">
                                    <div class="info-box-content">
                                        <div class="info-box-content">
                                            <span class="info-box-number text-lg text-center text-bold text-blue  ">1 TZS</span>
                                            <span class="info-box-text text-center text-bold ">Equivalent to</span>
                                            <span class="info-box-number text-lg text-center text-bold text-red  mb-0">@if($vars['rate']->online_rate){{number_format((1/$vars['rate']->online_rate),10)}} USD @endif</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    <!-- /.card -->

                        <form class="prevent-resubmit-form "  method="POST"
                              id="create_exchange_rate_form" enctype="multipart/form-data">
                            <!-- /.card-header -->
                            <div class="card-body">
                                @csrf
                                {{ method_field('PATCH') }}
                                <div class="row">

                                    <div class="form-group col-md-4">
                                        <button  class="btn btn-flat mt-4 text-lg text-orange text-bold">Exchange  Margin Range For 1 USD to TSH</button>

                                    </div>
                                    <div class="form-group col-md-3">
                                        <label for="minimumRate">Minimum Rate</label>
                                        <input type="number" min="1" step="any" class="form-control" name="min_rate"
                                               value="{{$vars['rate']->min_rate}}" placeholder="Minimum:" required>
                                    </div>
                                    <div class="form-group col-md-3">
                                        <label for="maximum_rate">Maximum Rate</label>
                                        <input type="number" min="1" step="any" name="max_rate"
                                               value="{{$vars['rate']->max_rate}}" class="form-control"
                                               placeholder="Maximum:" required>
                                    </div>


                                    <div class="form-group col-md-2">
                                        <button type="submit" class="btn bg-gradient-orange mt-4"><i class="far fa-envelope"></i> Save
                                    </div>
                                </div>
                            </div>

                            <!-- /.card-footer -->
                        </form>

                </div>
                <!-- /.col -->
                    <div id="setup"  class="card  tab-pane  inline_card_change vat_detail">
                        <form class="prevent-resubmit-form "  method="POST"
                              id="create_vat_form" enctype="multipart/form-data">
                            <!-- /.card-header -->
                            <div class="card-body">
                                @csrf
                                <div class="row">

                                    <div class="form-group col-md-4">
                                        <button  class="btn btn-flat mt-4 text-lg text-orange text-bold">VAT </button>
                                    </div>
                                    <input type="hidden" name="id" value="{{$vars['vat']->id}}">

                                    <div class="col-md-3 callout callout-success">
                                        <label for="minimumRate">Current VAT</label><br/>
                                        <span  class="text-center span_to_dispay_vat"   placeholder="Minimum:">{{$vars['vat']->vat}}</span>
                                    </div>
                                    <div class="form-group col-md-3">
                                        <label for="maximum_rate">New VAT</label>
                                        <input type="number" max="1" step="any" name="vat"  class="form-control" placeholder="VAT:" required>
                                    </div>

                                    <div class="form-group col-md-2">
                                        <button type="submit" class="btn bg-gradient-orange mt-4"><i class="far fa-envelope"></i> Save</button>
                                    </div>
                                </div>
                            </div>

                            <!-- /.card-footer -->
                        </form>
                        <!-- /.card -->
                    </div>


                    <div id="areas"  class="card  tab-pane  ">
                        <div class="card-header p-2">
                            <ul class="nav nav-pills">
                                <li class="nav-item"><a class="nav-link find_area_by_on_tab_click"  data-loaded="false" data-address="countries" href="#countries" data-toggle="tab">Countries</a></li>
                                <li class="nav-item"><a class="nav-link find_area_by_on_tab_click " data-loaded="false" data-address="zonals"  href="#zonals"   data-toggle="tab">Zonals</a></li>
                                <li class="nav-item"><a class="nav-link find_area_by_on_tab_click"  data-loaded="false" data-address="regions" href="#regions" data-toggle="tab">Regions</a></li>
                                <li class="nav-item"><a class="nav-link find_area_by_on_tab_click " data-loaded="false" data-address="districts"  href="#districts"   data-toggle="tab">Districts</a></li>
                                <li class="nav-item"><a class="nav-link find_area_by_on_tab_click " data-loaded="false" data-address="wards"  href="#wards"   data-toggle="tab">Wards</a></li>
                                <li class="nav-item"><a class="nav-link find_area_by_on_tab_click " data-loaded="false" data-address="villages"  href="#villages"   data-toggle="tab">VIllages</a></li>
                            </ul>

                            <div class="card-body">
                                <div class="tab-content">
                                    <div class="tab-pane" id="countries">
{{--                                        @include('areas.countries._country')--}}
                                    </div>
                                    <div class="tab-pane" id="zonals">
{{--                                        @include('areas.zonals._zonal')--}}
                                    </div>

                                    <div class="tab-pane" id="regions">
{{--                                        @include('areas.regions._region')--}}
                                    </div>
                                    <div class="tab-pane" id="districts">
{{--                                        @include('areas.districts._district')--}}
                                    </div>

                                    <div class="tab-pane" id="wards">
{{--                                        @include('areas.wards._wards')--}}
                                    </div>
                                    <div class="tab-pane" id="villages">
{{--                                        @include('areas.villages._village')--}}
                                    </div>

                                </div>
                                <!-- /.tab-pane -->
                            </div>
                        </div><!-- /.card-header -->

                    </div>
                </div>
            </div>
            <!-- /.row -->
        </div>
    </section>
    <!-- /.content -->

@endsection

@section('js')
    @include('areas.script')
    <script type="text/javascript">

        $(document).on('click','.find_area_by_on_tab_click',function (e) {
            e.preventDefault();
            let loaded = $(this).data('loaded');
            let urlId = $(this).data('address');
            $(this).data('loaded',true);
            findAreasFunction(urlId,loaded,'areas');

        });
        $(document).on('submit', '#create_exchange_rate_form', function (e) {
            e.preventDefault();

            $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                }
            });
            var formdata = new FormData(this);
            $.ajax({
                type: "POST",
                url: '/exchange_rates/{{$vars['rate']->uuid}}',
                processData: false,
                cache: false,
                contentType: false,
                data: formdata,
                beforeSend: function () {
                    run_waitMe('ios', 'create_exchange_rate_form', 'saving');
                },
                complete: function () {
                    $('#create_exchange_rate_form').waitMe("hide");
                },
                success: function (data) {
                    toastFunction('success','The Margin Range For  Rate Change Has Been Updated')
                    // largeToastPanel('success','The Margin Range For  Rate Change Has Been Updated');

                    $('.prevent-resubmit-button').prop("disabled", false);
                    $('.prevent-resubmit-button').html('Submit');
                },
                error: function (xhr, ajaxOptions, thrownError) {
                    $('.prevent-resubmit-button').prop("disabled", false);
                    $('.prevent-resubmit-button').html('Submit');
                    show_alert('danger', xhr.responseText);
                }
            });
        });

        $(document).on('submit', '#create_vat_form', function (e) {
            e.preventDefault();

            $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                }
            });
            var formdata = new FormData(this);
            $.ajax({
                type: "POST",
                url: '/update_vat',
                processData: false,
                contentType: false,
                data: formdata,
                beforeSend: function () {
                    run_waitMe('ios', 'create_vat_form', 'saving');
                },
                complete: function () {
                    $('#create_vat_form').waitMe("hide");
                },
                success: function (data) {
                    toastFunction('success','The Margin Range For  Rate Change Has Been Updated')
                    $(`#create_vat_form input[name='vat']`).val();
                    $('.span_to_dispay_vat').text($(`#create_vat_form input[name='vat']`).val())
                    $('.prevent-resubmit-button').prop("disabled", false);
                    $('.prevent-resubmit-button').html('Submit');
                },
                error: function (xhr, ajaxOptions, thrownError) {
                    largeToastPanel('error','Something went Wrong');
                    $('.prevent-resubmit-button').prop("disabled", false);
                    $('.prevent-resubmit-button').html('Submit');
                    show_alert('danger', xhr.responseText);
                }
            });
        });

        $(document).on('submit', '#add_edit_form', function (e) {
            e.preventDefault();
            submitAreaFunction('add_edit_form','countries','append_data_table')
        });

        $(document).on('submit', '#add_edit_form_zonal', function (e) {
            e.preventDefault();
            submitAreaFunction('add_edit_form_zonal','zonals','append_data_table_zonal')
        });

        $(document).on('submit', '#add_edit_form_region', function (e) {
            e.preventDefault();
            submitAreaFunction('add_edit_form_region','regions','append_data_table_region')
        });

        $(document).on('submit', '#add_edit_form_district', function (e) {
            e.preventDefault();
            submitAreaFunction('add_edit_form_district','districts','append_data_table_district')
        });

        $(document).on('submit', '#add_edit_form_ward', function (e) {
            e.preventDefault();
            submitAreaFunction('add_edit_form_ward','wards','append_data_table_ward')
        });
        $(document).on('submit', '#add_edit_form_village', function (e) {
            e.preventDefault();
            submitAreaFunction('add_edit_form_village','villages','append_data_table_village')
        });

        $(document).on('submit', '#add_edit_form_fertilizer', function (e) {
            e.preventDefault();
            submitAreaFunction('add_edit_form_fertilizer','fertilize_pesticides','append_data_table_fertilizer')
        });

        $(document).on('click', '.click_toggle_button', function (e) {
            e.preventDefault();
            $('#add_edit_form_village ').val('');
            document.getElementById('add_edit_form_village').reset();
            $('.select2').val('').trigger('change.select2');
            $('.country_id').val(212).trigger('change.select2');
            $('.toggle_village_div').toggle('slow');
        });
    </script>

@endsection