@extends('admin.layout.index')
@section('title')
    {{ __('messages.fleet') }}
@endsection
@section('css')
    <style>
        .center-test {
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;

        }

        .form-input-test {
            width: 350px;
            padding: 20px;
            background: #fff;
            box-shadow: -3px -3px 7px rgba(94, 104, 121, 0.377),
                3px 3px 7px rgba(94, 104, 121, 0.377);
            margin-bottom: 50px;
            margin-top: 50px;
        }

        .form-input-test img {
            width: 100%;
            margin-bottom: 30px;
            position: relative;
            max-height: 100%;
            border: 4px solid #fff;

        }

        .form-input-test input {
            display: none;
        }

        .form-input-test label {
            display: block;
            width: 45%;
            height: 45px;
            line-height: 50px;
            text-align: center;
            background: #1172c2;
            color: #fff;
            font-size: 15px;
            font-family: "Open Sans", sans-serif;
            text-transform: Uppercase;
            font-weight: 600;
            border-radius: 5px;
            cursor: pointer;
            margin: auto;
        }
    </style>
@endsection
@section('content')
    <div class="content-header">

    </div>
    <div class="content">
        <div class="col-12">
            <div class="card justify-content-between d-flex">
                <div class="card-header text-center">
                    <label for="fleet">
                        <strong style="font-size: 35px">
                            {{ $fleet->name }}
                        </strong>
                    </label>
                    <a href="{{ route('table.add-view', $fleet->id) }}">
                        <button class="btn btn-primary pull-right">
                            {{ __('messages.add-table') }}
                        </button>
                    </a>
                </div>

            </div>
            @if (!empty($fleet->tablesWithProperties))
                @foreach ($fleet->tablesWithProperties as $table)
                    <div class="box">
                        <div class="box-header bg-primary">
                            <div class="bg-primary justify-content-between d-flex align-items-center">
                                <h4 class="card-header "><strong>
                                        {{ $table->name . ' (' . count($table->properties) . ' ITEMS) ' }}
                                    </strong>

                                </h4>
                                <div class="row">
                                    <div class="col-md-4">
                                        <a href="{{ route('property.add-view', [$fleet->id, $table->id]) }}">
                                            <button class="btn btn-behance pull-right">
                                                {{ __('messages.add') }}
                                            </button>
                                        </a>
                                    </div>
                                    <div class="col-md-3">
                                        <a href="{{ route('table.updated', $table->id) }}">
                                            <button class="btn btn-primary pull-right">
                                                {{ __('messages.edit') }}
                                            </button>
                                        </a>
                                    </div>
                                    <div class="col-md-4">
                                        <button class="btn btn-danger pull-right" id="{{ $table->id }}"
                                            onclick="deleteCheck(this)">
                                            {{ __('messages.delete') }}
                                        </button>
                                    </div>

                                </div>
                            </div>


                        </div>
                    </div>

                    <div class="box-body">
                        <div class="table-responsive">
                            <table class="table product-overview">
                                <thead>
                                    <tr>
                                        <th>{{ __('messages.name') }}</th>
                                        <th>{{ __('messages.value') }}</th>
                                        <th style="text-align:center">{{ __('messages.edit') }}</th>
                                        <th style="text-align:center">{{ __('messages.delete') }}</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @if (!empty($table->properties))
                                        @foreach ($table->properties as $business)
                                            <tr>
                                                <td>
                                                    {{ $business->name }}
                                                </td>
                                                <td>
                                                    <h5> {{ $business->value1 }} </h5>
                                                </td>
                                                <td align="center"><a href="{{ route('property.updated', $business->id) }}"
                                                        class="btn btn-circle btn-xs" data-toggle="tooltip"
                                                        data-original-title="Delete"><i class="fa fa-edit"></i></a></td>
                                                <td align="center"><a class="btn btn-circle btn-danger btn-xs"
                                                        onclick="propertyDeleteCheck(this)" id="{{ $business->id }}"
                                                        data-toggle="tooltip" data-original-title="Delete"><i
                                                            class="ti-trash"></i></a></td>
                                            </tr>
                                        @endforeach
                                    @endif


                                </tbody>
                            </table>

                        </div>

                    </div>
                @endforeach
            @endif
        </div>
    </div>


@endsection
@section('js')
    <script>
        function showPreview(event) {
            //alert('showPreview');
            if (event.target.files.length > 0) {
                let src = URL.createObjectURL(event.target.files[0]);
                let preview = document.getElementById("file-ip-1-preview");
                preview.src = src;
                preview.style.display = "block";
            }
        }

        function showPreview2(event) {
            //alert('showPreview');
            if (event.target.files.length > 0) {
                let src = URL.createObjectURL(event.target.files[0]);
                let preview = document.getElementById("file-ip-2-preview");
                preview.src = src;
                preview.style.display = "block";
            }
        }

        function deleteCheck(el) {
            console.log(el);
            swal.fire({
                title: `{{ __('Are you sure to delete') }} `,
                text: "{{ __('You will not be able to recover this!') }}",
                type: "warning",
                showCancelButton: true,
                confirmButtonColor: "#DD6B55",
                confirmButtonText: "{{ __('Yes, delete it!') }}",
                cancelButtonText: "{{ __('Cancel') }}",
                closeOnConfirm: false
            }).then(function(result) {
                if (result.isConfirmed) {
                    // ajax to remove here
                    $.ajax({
                        url: "{{ route('table.deleted') }}",
                        method: "post",
                        data: {
                            id: el.id,
                            _token: '{{ csrf_token() }}',
                        },
                    }).done(function(data) {
                        $('.bg-warning').remove().countSeletToDelete();
                        return swal.fire({
                            title: `{{ __('The deletion was completed successfully') }}`,
                            text: "{{ __('not related to products') }}",
                            type: "success",
                            confirmButtonColor: "#DD6B55",
                            confirmButtonText: "{{ __('Okey') }}",
                            confirmOnConfirm: false
                        });
                    }).then(function() {
                        console.log('aaa');
                        window.location.reload();
                    }).catch(function(error) {
                        // Handle AJAX errors here
                        console.error(error);
                    });
                }
            });
        }

        function propertyDeleteCheck(el) {
            console.log(el);
            swal.fire({

                title: `{{ __('Are you sure to delete') }} `,
                text: "{{ __('You will not be able to recover this!') }}",
                type: "warning",
                showCancelButton: true,
                confirmButtonColor: "#DD6B55",
                confirmButtonText: "{{ __('Yes, delete it!') }}",
                cancelButtonText: "{{ __('Cancel') }}",
                closeOnConfirm: false
            }).then(function(result) {
                if (result.isConfirmed) {
                    // ajax to remove here
                    $.ajax({
                        url: "{{ route('property.deleted') }}",
                        method: "post",
                        data: {
                            id: el.id,
                            _token: '{{ csrf_token() }}',
                        },
                    }).done(function(data) {
                        $('.bg-warning').remove().countSeletToDelete();
                        return swal.fire({
                            title: `{{ __('The deletion was completed successfully') }}`,
                            text: "{{ __('not related to products') }}",
                            type: "success",
                            confirmButtonColor: "#DD6B55",
                            confirmButtonText: "{{ __('Okey') }}",
                            confirmOnConfirm: false
                        });
                    }).then(function() {
                        console.log('aaa');
                        window.location.reload();
                    }).catch(function(error) {
                        // Handle AJAX errors here
                        console.error(error);
                    });
                }
            });
        }
    </script>
@endsection