@extends('layouts.app')
@section('content')
    <div class="page">
        <div class="page-wrapper">
            <!-- Page header -->
            <div class="page-header d-print-none">
                <div class="container-xl">
                    <div class="row g-2 align-items-center">
                        <div class="col">
                            <h2 class="page-title">
                                Shopping Mall
                            </h2>
                        </div>
                        <!-- Page title actions -->
                        <div class="col-auto">
                            <div class="d-flex">
                                <a href=" {{ route('shoppingMall.create') }}" class="btn btn-primary">
                                    <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><line x1="12" y1="5" x2="12" y2="19" /><line x1="5" y1="12" x2="19" y2="12" /></svg>
                                    New Shopping Mall
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Page body -->
            <div class="page-body">
                <div class="container-xl">
                    <div class="card">
                        <div class="card-body">
                            <div id="table-default" class="table-responsive">
                                <table class="table shoppingMallDataTable">
                                    <thead>
                                    <tr>
                                        <th>ID</th>
                                        <th>Name</th>
                                        <th>Created At</th>
                                        <th width="120">Action</th>
                                    </tr>
                                    </thead>
                                    <tbody class="table-tbody">
                                    @foreach($rows as $index => $row)
                                        <tr>
                                            <td>
                                                {{$row->id}}
                                            </td>
                                            <td>
                                                {{ $row->name }}
                                            </td>
                                            <td>
                                                {{$row->created_at}}
                                            </td>
                                            <td>
                                                <button type="button" class="btn btn-info btn-sm"
                                                        title="show"
                                                        style="border-radius: 5px"
                                                        data-request-url="{{route('shoppingMall.show', $row->id)}}"
                                                        data-title="Shopping Mall Detail"
                                                        data-bs-toggle="modal"
                                                        data-bs-target="#showModal">
                                                    <svg xmlns="http://www.w3.org/2000/svg" style="width: 18px;height: 18px" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><circle cx="12" cy="12" r="2" /><path d="M22 12c-2.667 4.667 -6 7 -10 7s-7.333 -2.333 -10 -7c2.667 -4.667 6 -7 10 -7s7.333 2.333 10 7" /></svg>
                                                </button>
                                                <a href="{{ route('shoppingMall.edit', $row->id) }}" title="edit" class="btn btn-primary btn-sm" style="border-radius:5px ;">
                                                    <svg xmlns="http://www.w3.org/2000/svg" style="width: 18px; height: 18px" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M7 7h-1a2 2 0 0 0 -2 2v9a2 2 0 0 0 2 2h9a2 2 0 0 0 2 -2v-1" /><path d="M20.385 6.585a2.1 2.1 0 0 0 -2.97 -2.97l-8.415 8.385v3h3l8.385 -8.415z" /><path d="M16 5l3 3" /></svg>
                                                </a>
                                                <a href="{{ route('shoppingMall.delete', $row->id) }}" title="delete" class="btn btn-danger btn-sm remove-size" style="border-radius: 5px">
                                                    <svg xmlns="http://www.w3.org/2000/svg" style="width: 18px; height: 18px" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><line x1="4" y1="7" x2="20" y2="7" /><line x1="10" y1="11" x2="10" y2="17" /><line x1="14" y1="11" x2="14" y2="17" /><path d="M5 7l1 12a2 2 0 0 0 2 2h8a2 2 0 0 0 2 -2l1 -12" /><path d="M9 7v-3a1 1 0 0 1 1 -1h4a1 1 0 0 1 1 1v3" /></svg>
                                                </a>
                                            </td>
                                        </tr>
                                    @endforeach
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="modal modal-blur fade" id="shoppingMall-detail-modal" tabindex="-1" role="dialog" aria-hidden="true">
        <div class="modal-dialog modal-lg modal-dialog-centered" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Shopping Mall Detail</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <span id="shoppingMall-detail-placeholder"></span>
                </div>
            </div>
        </div>
    </div>

@stop

@push('javascript')
    <script>
        $(function() {

            $('.shoppingMallDataTable').dataTable({
                "order": [[ 0, "desc" ]]
            });

            $(document).off('click', '.remove-size').on('click', '.remove-size', function (e) {
                e.preventDefault();
                var action_url = $(this).attr('href');
                Swal.fire({
                    title: 'Are you sure?',
                    type: 'warning',
                    text: 'Do you really want to remove this?',
                    icon: 'warning',
                    confirmButtonText: 'Yes, delete it!',
                    showCancelButton: true,
                    confirmButtonColor: '#3085d6',
                    cancelButtonColor: '#d33',
                }).then((result) => {
                    if (result.value) {
                        window.location.href = action_url;
                    }
                });
            });
        });
    </script>
@endpush