@extends('master')

@section('title', 'golds')


@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-->
                    <div class="card-header border-0 pt-6">
                        <!--begin::Card title-->

                        <!--begin::Card title-->

                    </div>
                    <!--end::Card header-->
                    <!--begin::Card body-->
                    <div class="card-body pt-0 table-responsive">
                        <!--begin::Table-->
                        <table class="table align-middle table-row-dashed fs-6 gy-5" id="kt_notifications_table">
                            <!--begin::Table head-->
                            <thead>
                                <!--begin::Table row-->
                                <tr class="text-start text-gray-400 fw-bold fs-7 text-uppercase gs-0">
                                    <th>#</th>
                                    <th class="min-w-125px">@lang('app.golds.name_ar')</th>
                                    <th class="min-w-125px">@lang('app.golds.name_en')</th>
                                    <th class="min-w-125px">@lang('app.golds.symbol')</th>
                                    <th class="min-w-125px">@lang('app.golds.price_in_egypt')</th>
                                    <th class="min-w-125px">@lang('app.golds.price_in_usd')</th>
                                    <th class="min-w-125px">@lang('app.golds.latest_updated')</th>
                                    <th class="min-w-125px">@lang('app.golds.status')</th>
                                    <th class="min-w-125px">@lang('app.golds.sorting')</th>
                                    <th class="min-w-70px">@lang('app.general.Actions')</th>
                                </tr>
                                <!--end::Table row-->
                            </thead>

                            <tbody class="fw-semibold text-gray-600">
                            </tbody>

                        </table>
                        <!--end::Table-->
                    </div>
                    <!--end::Card body-->
                </div>
                <!--end::Card-->
                <!--begin::Modals-->


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

@push('scripts')
    <script>
        $(document).ready(function() {
            $('#kt_notifications_table').DataTable({
                processing: true,
                serverSide: true,
                "dom": "flrtip",

                ajax: "{{ route('golds.data') }}",

                "columns": [{
                        "searchable": false,
                        "sortable": false,
                        "data": "ordering"
                    },
                    {
                        "data": "name_ar",
                    },
                    {
                        "data": "name_en",
                    },
                    {
                        "data": "symbol",
                    },
                    {
                        "searchable": false,
                        "sortable": false,
                        "data": "price_in_egp",
                        render: function(data) {
                            return `<p>${data} </p>`;
                        }

                    },
                    {
                        "searchable": false,
                        "sortable": false,
                        "data": "price_in_usd",
                        render: function(data) {
                            return `<p>${data} </p>`;
                        }

                    },

                    {
                        "data": "latest_updated",
                    },
                    {
                        "searchable": false,
                        "sortable": false,
                        "data": "status",
                        render: function(data) {
                            if ( data == 'up'){
                                return `<span class="svg-icon svg-icon-primary svg-icon-2x"><!--begin::Svg Icon | path:/var/www/preview.keenthemes.com/metronic/releases/2021-05-14-112058/theme/html/demo8/dist/../src/media/svg/icons/Map/Direction1.svg--><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24px" height="24px" viewBox="0 0 24 24" version="1.1">
                                                <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                                                    <rect x="0" y="0" width="24" height="24"/>
                                                    <path d="M12,16.381038 L12,6.47213595 L5.99460483,18.4829263 L12,16.381038 Z M2.88230018,20.2353996 L11.2844582,3.43108351 C11.4820496,3.03590071 11.9625881,2.87572123 12.3577709,3.07331263 C12.5125928,3.15072359 12.6381308,3.27626158 12.7155418,3.43108351 L21.1176998,20.2353996 C21.3152912,20.6305824 21.1551117,21.1111209 20.7599289,21.3087123 C20.5664522,21.4054506 20.3420471,21.4197165 20.1378777,21.3482572 L12,18.5 L3.86212227,21.3482572 C3.44509941,21.4942152 2.98871325,21.2744737 2.84275525,20.8574509 C2.77129597,20.6532815 2.78556182,20.4288764 2.88230018,20.2353996 Z" fill="#000000" fill-rule="nonzero"/>
                                                </g>
                                            </svg><!--end::Svg Icon--></span>`
                            }
                            else if(data == 'down'){
                                return `<span class="svg-icon svg-icon-primary svg-icon-2x"><!--begin::Svg Icon | path:/var/www/preview.keenthemes.com/metronic/releases/2021-05-14-112058/theme/html/demo8/dist/../src/media/svg/icons/Navigation/Arrow-down.svg--><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24px" height="24px" viewBox="0 0 24 24" version="1.1">
                                            <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                                                <polygon points="0 0 24 0 24 24 0 24"/>
                                                <rect fill="#000000" opacity="0.3" x="11" y="5" width="2" height="14" rx="1"/>
                                                <path d="M6.70710678,18.7071068 C6.31658249,19.0976311 5.68341751,19.0976311 5.29289322,18.7071068 C4.90236893,18.3165825 4.90236893,17.6834175 5.29289322,17.2928932 L11.2928932,11.2928932 C11.6714722,10.9143143 12.2810586,10.9010687 12.6757246,11.2628459 L18.6757246,16.7628459 C19.0828436,17.1360383 19.1103465,17.7686056 18.7371541,18.1757246 C18.3639617,18.5828436 17.7313944,18.6103465 17.3242754,18.2371541 L12.0300757,13.3841378 L6.70710678,18.7071068 Z" fill="#000000" fill-rule="nonzero" transform="translate(12.000003, 14.999999) scale(1, -1) translate(-12.000003, -14.999999) "/>
                                            </g>
                                        </svg><!--end::Svg Icon--></span>`
                            }else
                            {
                                return `<span class="svg-icon svg-icon-primary svg-icon-2x"><!--begin::Svg Icon | path:/var/www/preview.keenthemes.com/metronic/releases/2021-05-14-112058/theme/html/demo8/dist/../src/media/svg/icons/Navigation/Up-down.svg--><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24px" height="24px" viewBox="0 0 24 24" version="1.1">
                                                    <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                                                        <polygon points="0 0 24 0 24 24 0 24"/>
                                                        <rect fill="#000000" opacity="0.3" transform="translate(6.000000, 11.000000) rotate(-180.000000) translate(-6.000000, -11.000000) " x="5" y="5" width="2" height="12" rx="1"/>
                                                        <path d="M8.29289322,14.2928932 C8.68341751,13.9023689 9.31658249,13.9023689 9.70710678,14.2928932 C10.0976311,14.6834175 10.0976311,15.3165825 9.70710678,15.7071068 L6.70710678,18.7071068 C6.31658249,19.0976311 5.68341751,19.0976311 5.29289322,18.7071068 L2.29289322,15.7071068 C1.90236893,15.3165825 1.90236893,14.6834175 2.29289322,14.2928932 C2.68341751,13.9023689 3.31658249,13.9023689 3.70710678,14.2928932 L6,16.5857864 L8.29289322,14.2928932 Z" fill="#000000" fill-rule="nonzero"/>
                                                        <rect fill="#000000" opacity="0.3" transform="translate(18.000000, 13.000000) scale(1, -1) rotate(-180.000000) translate(-18.000000, -13.000000) " x="17" y="7" width="2" height="12" rx="1"/>
                                                        <path d="M20.2928932,5.29289322 C20.6834175,4.90236893 21.3165825,4.90236893 21.7071068,5.29289322 C22.0976311,5.68341751 22.0976311,6.31658249 21.7071068,6.70710678 L18.7071068,9.70710678 C18.3165825,10.0976311 17.6834175,10.0976311 17.2928932,9.70710678 L14.2928932,6.70710678 C13.9023689,6.31658249 13.9023689,5.68341751 14.2928932,5.29289322 C14.6834175,4.90236893 15.3165825,4.90236893 15.7071068,5.29289322 L18,7.58578644 L20.2928932,5.29289322 Z" fill="#000000" fill-rule="nonzero" transform="translate(18.000000, 7.500000) scale(1, -1) translate(-18.000000, -7.500000) "/>
                                                    </g>
                                                </svg><!--end::Svg Icon--></span>`;
                            }
                        }
                    },

                    {
                        "searchable": false,
                        "sortable": false,
                        "data":    "sorting"
                    },
                    {
                        "searchable": false,
                        "sortable": false,
                        "data":    "actions"
                    },

                ]
            });
        });
    </script>
@endpush