@extends('central.dashboard.layouts.master')

@section('sidebar')
    @include('central.dashboard.layouts.sidebar', ['page' => 'currencies'])
@endsection

@section('content')
    <div class="create-form-layout py-4">
        <form action="{{ route('central.dashboard.currencies.store') }}" method="post" id="create-user-form"
            enctype="multipart/form-data">
            @csrf
            <div class="row my-3">
                <div class="col-lg-4 col-md-4 col-sm-4 m-3">
                    <label for="name" class="rs">إسم العملة </label>
                    <input type="text" name="name" id="name" class="form-control" placeholder="إسم العملة"
                        value="{{ request()->old('name') }}" required>
                </div>

                <div class="col-lg-4 col-md-4 col-sm-4 m-3">
                    <label for="ar_symbol" class="rs"> رمز العملة بالعربي</label>
                    <input type="text" name="ar_symbol" id="ar_symbol" class="form-control"
                        placeholder=" رمز العملة بالعربي" value="{{ request()->old('ar_symbol') }}" required>
                </div>

                <div class="col-lg-4 col-md-4 col-sm-4 m-3">
                    <label for="symbol" class="rs"> رمز العملة بالانكليزي</label>
                    <input type="text" name="symbol" id="symbol" class="form-control"
                        placeholder=" رمز العملة بالانكليزي" value="{{ request()->old('symbol') }}" required>
                </div>

                <div class="col-lg-4 col-md-4 col-sm-4 m-3">
                    <label for="exchange_price" class="rs">سعر الصرف</label>
                    <input type="number" name="exchange_price" id="exchange_price" class="form-control"
                        placeholder=" سعر الصرف" value="{{ request()->old('exchange_price') }}" required>
                </div>

                <div class="col-12 col-md-3 d-flex m-3">
                    <div>
                        <label for="flag" class="upload-file-appearence">العلم</label>
                        <input type="file" name="flag" id="flag" class="form-control" accept="image/*">
                    </div>

                    <div class="preview-image-layout d-flex">
                        @if ($flag)
                            <img src="{{ $flag }}" alt="Logo Image" class="preview-image" style="width: 150px">
                        @endif
                    </div>
                </div>

                <div class="col-12 text-center">
                    <button class="btn btn-success mt-3 submit-form-btn">إضافة</button>
                    <span class="text-danger submit-note" style="display: none;">الرجاء الانتظار ...</span>
                </div>
            </div>
        </form>
    </div>
@endsection

@push('script')
    <script>
        $(() => {
            $('#flag').on('change', function(event) {
                let file = event.target.files[0];
                let img = "<img src='" + URL.createObjectURL(file) + "' class='preview-image'" +
                    "' style='width:150px; top:58%; left:18%' >";
                $('.preview-image-layout').html(img);
            });
        });
    </script>
@endpush