@extends('layouts.master')
@section('styles')
    <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet">
    <!-- Toastify CSS -->
    <link rel="stylesheet" href="{{ asset('build/assets/libs/toastify-js/src/toastify.css') }}">
@endsection
@section('content')
    <meta name="csrf-token" content="{{ csrf_token() }}" />
    <!-- Page Header -->
    @php
        $breadcrumbs = [
            ['label' => 'Dashboard', 'url' => route('admin.dashboard')],
            ['label' => 'Setting', 'url' => route('admin.settings')],
            ['label' => 'Currencies', 'url' => '#', 'active' => true],
        ];
    @endphp
    <x-ui.breadcrumb :items="$breadcrumbs" title="Currencies" />
    <!-- Page Header Close -->

    <!-- Start::row-1 -->
    <div class="row">
        <div class="col-xl-12">
            <x-ui.card :cardClass="'overflow-hidden'" :hr_line="false" title="">
                <form action="{{ route('admin.currencies.store') }}" method="POST" enctype="multipart/form-data">
                @csrf
                <div class="row gy-3">
                    <x-form.input label="Currency Name:" col="col-3" name="title" placeholder="Us Dollar" autofocus />

                    <x-form.input label="Currency Code:" col="col-2" name="code" placeholder="USD" autofocus />

                    <x-form.input label="Currency Symbol:" col="col-2" name="symbol" placeholder="$" autofocus />

                    <x-form.outline-toggle class="col-2" name="posi" label="Symbol Position"
                        :selected="old('posi')" :required="true" :options="[
                            '0' => ['label' => 'Left'],
                            '1' => ['label' => 'Right'],
                        ]" />

                      <div class="col-2">
                        <button type="submit" id="submit" class="btn btn-primary mt-4" style="width: 100px;">Add</button>
                      </div>
                </div>        

               </form>     
            </x-ui.card>

            <x-ui.card :cardClass="'overflow-hidden'"  title="Currencies">
                <x-slot name="header">
                    <div class="card-title d-flex gap-2">
                        <div>
                            <input class="form-control" type="text" id="search" placeholder="Search Here"
                                aria-label=".form-control-sm example">
                        </div>
                    </div>
                </x-slot>

                @php
                    $columns = [
                        ['checkbox' => false, 'class' => 'ps-4','label'=>'ID'],
                        ['label' => 'Currency Name'],
                        ['label' => 'Code'],
                        ['label' => 'Symbol'],
                        ['label' => 'Action'],
                    ];
                @endphp

                <x-ui.table id="data_table" :columns="$columns"></x-ui.table>
            </x-ui.card>
        </div>
    </div>

    {{-- Model --}}
    <x-ui.modal id="currencyModal" title="Update Currency">
        <div class="modal-body p-2">
            <form action="{{ route('admin.currencies.update') }}" method="POST" enctype="multipart/form-data">
                @csrf
                <input type="hidden" name="id" id="c_id">
                <div class="row gy-3">
                    <x-form.input label="Currecny Title:" class="" name="title" placeholder="Enter Title" autofocus />

                    <x-form.input label="Currecny Code:" class="" name="code" placeholder="Enter Code" autofocus />

                    <x-form.input label="Currecny Symbol:" class="" name="symbol" placeholder="$" autofocus />

                    <x-form.outline-toggle class="col-xl-6 mt-3" name="posi1" label="Symbol Position"
                        :selected="old('posi1')" :required="true" :options="[
                            '0' => ['label' => 'Left'],
                            '1' => ['label' => 'Right'],
                        ]" />
                </div>
                <button type="submit" id="submit" class="btn btn-primary mt-3 mb-3 px-4 float-end">Save</button>
            </form>
        </div>
    </x-ui.modal>
    {{-- End model --}}
@endsection

@section('scripts')
    @include('layouts.components.common-script')

    <script>
        $(document).ready(function() {
            const table = new DataTableUtility('data_table', "{{ route('admin.currencies.data') }}", {

            }, [{
                    data: 'id',
                    orderable: false
                }, {
                    data: 'title'
                }, {
                    data: 'code'
                }, {
                    data: 'symbol'
                } ,
                {
                    data: null,
                    orderable: false,
                    render: function(data, type, row) {
                        return `
                            <a href="#" class="btn btn-icon btn-sm btn-info-light btn-wave waves-effect waves-light edit-currency" id="${row.id}">
                                <i class="ri-edit-line"></i>
                            </a>
                            <a href="javascript:void(0);" id="` + row.id + `" data-id="currency" class="joblist-btn btn btn-icon btn-sm btn-primary2-light btn-wave waves-effect waves-light deleteItem">
                                <i class="ri-delete-bin-line"></i>
                            </a>`;
                    }
                }
            ]);
            table.initialize();

        });
 

        $('body').on('click', '.edit-currency', function() {
            
            const id = $(this).attr('id'); // Use the data-id attribute directly
            if (id) {
                const url = `{{ route('admin.currencies.edit', ['id' => '__ID__']) }}`.replace('__ID__', id);

                AjaxUtil.get(url, function(response) {
                    $('#c_id').val(id);
                    $('#currencyModal #title').val(response.title);
                    $('#currencyModal #code').val(response.code);
                    $('#currencyModal #symbol').val(response.symbol);
                    if(response.posi==0){
                       $('input[name="posi1"][value="0"]').prop('checked', true).trigger('change');
                    }else{
                        $('input[name="posi1"][value="1"]').prop('checked', true).trigger('change');
                    } 
                      
                    $('#currencyModal').modal('show');
                }, function(xhr, status, error) {
                    console.error('Error:', error);
                    AjaxUtil.showToast('Error loading data.', 'error');
                });
            } else {
                AjaxUtil.showToast('Invalid ID.', 'error');
            }
        })
 
    </script>
@endsection