@extends('dashboard.layout.default')

@section('page_title',trans("pages.currencies"))

@section('content')

  <!-- Content Wrapper. Contains page content -->
  <div class="content-wrapper">
    <!-- Content Header (Page header) -->
    <section class="content-header">
      <div class="container-fluid">
        <div class="row mb-2">
          <div class="col-sm-6">
            <ol class="breadcrumb float-sm-left">
            <li class="breadcrumb-item"><a href="{{Route('dashboard')}}">{{ __("pages.home") }}</a></li>
            <li class="breadcrumb-item"><a>{{__('pages.currencies')}}</a></li>
            </ol>
          </div>
        </div>
        <div class="row mb-2">
          <div class="col-md-6 my-2">
            <a href="{{Route('currencies.create')}}" class="btn btn-primary"
            >{{ trans('pages.create')}} <i class="nav-icon  fas fa-plus"></i></a>
          </div>
        </div>
      </div><!-- /.container-fluid -->
    </section>

    <!-- Main content -->
    <section class="content">


      <div class="card">
          <!-- /.card-header -->
          <div class="card-body">
            {{ $dataTable->table(['class' => 'table table-bordered']) }}
          </div>
      </div>
      <div class="card">
          <div class="card-header">
            <h3 class="card-title">{{__('pages.change_default_currency')}}</h3>
          </div>
          <div class="card-body">
            <form action="{{Route('currencies.change_default')}}" method="post" id="changeDefaultCurrencyForm">
              @csrf
              <div class="form-group">
                <label for="default_currency">{{__('pages.default_currency')}}</label>
                <select name="default_currency" id="default_currency" class="form-control">
                  <option value="">{{__('pages.select')}}</option>
                  @foreach ($currencies as $currency)
                    <option value="{{$currency->id}}" {{$default_currency == $currency->id ? 'selected' : ''}}
                    >{{$currency->name}}</option>
                  @endforeach
                </select>
              </div>
              <button class="btn btn-primary" type="button" data-toggle="modal" data-target="#changeDefaultCurrencyModal">{{__('pages.save')}}</button>
            </form>
          </div>
      </div>
    <!-- /.card-body -->

      </section>
    <!-- /.content -->
  </div>
  <!-- /.content-wrapper -->
  <!-- Modal -->
<div class="modal fade" id="changeDefaultCurrencyModal" tabindex="-1" role="dialog" aria-labelledby="changeDefaultCurrencyModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="changeDefaultCurrencyModalLabel">{{ __('pages.confirm') }}</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <p>{{ __('pages.change_default_currency_message_to')}} <span id="selectedCurrency"></span></p> 
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">{{ __('names.cancel') }}</button>
                <!-- Button to submit the form -->
                <button type="submit" class="btn btn-primary" id="submitModalBtn">{{ __('names.yes') }}</button>
            </div>
        </div>
    </div>
</div>
@endsection

@push('js_scripts')
{{ $dataTable->scripts() }}
<script>
    $(document).ready(function(){
        $('#changeDefaultCurrencyModal').on('show.bs.modal', function (event) {
            var currency = $('#default_currency option:selected').text();
            var modal = $(this)
            modal.find('#selectedCurrency').text(currency)
        })
        $('#submitModalBtn').on('click',function(){
            $('#changeDefaultCurrencyModal').modal('hide')
            $('#changeDefaultCurrencyForm').submit()
        })
    })
</script>
@endpush