@extends('master')

@section('title', 'show currencies')

@push('head')
    <style>
        .tabs-header {
            width: 20rem;
            font-size: 18px;
            border-top-width: 1px !important;
            border-bottom-right-radius: 0 !important;
            border-bottom-left-radius: 0 !important;
        }
    </style>
@endpush

@section('content')
    <div class="app-main flex-column flex-row-fluid" id="kt_app_main">
        <!--begin::Content-->
        <div id="kt_app_content" class="app-content flex-column-fluid">
            <!--begin::Content container-->
            <div id="kt_app_content_container" class="app-container container-xxl">
                <!--begin::Card-->
                <div class="card">
                    <!--begin::Card header-->
                    <!--begin::Card header-->
                    <div class="card-header border-0 pt-6" style="justify-content: space-between; align-items: center;">
                        <div class="list-group" id="list-tab" role="tablist" style="flex-direction: row !important">
                            <a class="list-group-item list-group-item-action active tabs-header" id="list-home-list"
                               data-bs-toggle="list" href="#list-home" role="tab" aria-controls="list-home">
                                Currency
                            </a>

                            <a class="list-group-item list-group-item-action tabs-header" id="list-profile-list"
                               data-bs-toggle="list" href="#list-profile" role="tab" aria-controls="list-profile">
                                Banks

                            </a>
                        </div>



                    </div>
                    <!--end::Card header-->
                    <!--end::Card header-->

                    <!--begin::Card body-->
                    <div class="card-body pt-0">

                        <div class="tab-content" id="nav-tabContent">
                            <div class="tab-pane fade show active" id="list-home" role="tabpanel"
                                 aria-labelledby="list-home-list">
                            <div class="mb-10">
                                <label for="inputArabicName" class="form-label">@lang('app.currencies.name_ar') <span class="required-field">*</span>
                                </label>
                                <input type="text" class="form-control @error('name_ar') is-invalid @enderror"
                                       id="inputArabicName" name="name_ar" value="{{$currency->name_ar}}" disabled>

                                @error('name_ar')
                                <div class="text-danger">{{ $message }}</div>
                                @enderror
                            </div>


                            <div class="mb-10">
                                <label for="inputArabicName" class="form-label">@lang('app.currencies.name_en') <span class="required-field">*</span>
                                </label>
                                <input type="text" class="form-control @error('name_en') is-invalid @enderror"
                                       id="inputArabicName" name="name_en" value="{{$currency->name_en}}" disabled>

                                @error('name_en')
                                <div class="text-danger">{{ $message }}</div>
                                @enderror
                            </div>

                            {{-- link --}}
                            <div class="mb-10">
                                <label for="inputArabicName" class="form-label">@lang('app.currencies.symbol') <span class="text-muted">(@lang('app.general.optional'))</span>
                                </label>
                                <input type="text" class="form-control @error('symbol') is-invalid @enderror"
                                       id="inputArabicName" name="symbol" value="{{ $currency->symbol }}" disabled>

                                @error('symbol')
                                <div class="text-danger">{{ $message }}</div>
                                @enderror
                            </div>

                            {{-- body --}}
                            <div class="mb-10">
                                <label for="inputBody" class="form-label">@lang('app.currencies.price') <span class="text-muted">(@lang('app.general.optional'))</span>
                                </label>

                                <textarea name="price" id="inputBody" cols="30" rows="10"
                                          class="form-control @error('price') is-invalid @enderror" disabled>{{ $currency->price }}</textarea>

                                @error('price')
                                <div class="text-danger">{{ $message }}</div>
                                @enderror
                            </div>



                            {{-- image --}}
                            <div class="mb-10">
                                <label for="exampleImage">@lang('app.general.image') <span class="text-muted" >(@lang('app.general.optional'))</span></label>
                                <input type="file" class="form-control imgInp" id="exampleImage" name="image"
                                       accept="image/*" disabled>

                                @error('image')
                                <div class="text-danger">{{ $message }}</div>
                                @enderror
                            </div>

                            {{-- image preview --}}
                            <div class="mb-10">
                                <img src="{{$currency->image?asset($currency->image):asset('assets/media/logos/banker.png')}}" alt="" class="img-thumbnail image-show" width="100" height="120"
                                     style="">
                            </div>


                            <div class="col-md-6">
                                <label for="Status">Status</label>
                                <select class="form-control" name="status" disabled>
                                    <option value="no_change" {{$currency->status == 'no_change'?'selected':''}}>No Change</option>
                                    <option value="up" {{$currency->status == 'up'?'selected':''}}>Up</option>
                                    <option value="down" {{$currency->status == 'down'?'selected':''}}>Down</option>

                                </select>

                            </div>

                            {{-- link --}}
                            <div class="mb-10">
                                <label for="inputArabicName" class="form-label">@lang('app.currencies.source') <span class="text-muted">(@lang('app.general.optional'))</span>
                                </label>
                                <input type="url" class="form-control @error('source') is-invalid @enderror"
                                       id="inputArabicName" name="source" value="{{ $currency->source }}" disabled>

                                @error('source')
                                <div class="text-danger">{{ $message }}</div>
                                @enderror
                            </div>

                            </div>
                        </div>


                    </div>
                    <!--end::Card body-->

                    <div class="tab-pane fade" id="list-profile" role="tabpanel"
                         aria-labelledby="list-profile-list"
                         style="display: flex;gap: 2rem; justify-content: center;">




                            <table class="table">
                                <thead>
                                <tr>
                                    <th scope="col">#</th>
                                    <th scope="col">Arabic Name</th>
                                    <th scope="col">English Name</th>
                                    <th scope="col">Purchase Price</th>
                                    <th scope="col">Selling Price</th>
                                </tr>
                                </thead>
                                <tbody>
                                @foreach ($banks as $bank)
                                <tr>
                                    <th scope="row">{{$bank->id}}</th>
                                    <td>{{$bank->name_ar}}</td>
                                    <td>{{$bank->name_en}}</td>
                                    <td>{{$bank->pivot->purchasing_price}}</td>
                                    <td>{{$bank->pivot->selling_price}}</td>
                                </tr>
                                @endforeach

                                </tbody>
                            </table>





                    </div>
                </div>
                <!--end::Card-->
                <!--begin::Modals-->


                <!--end::Modals-->
            </div>
            <!--end::Content container-->
        </div>
        <!--end::Content-->
    </div>
@endsection