@extends('backend.layouts.app')

@section('content')
<div class="p-3">
    <div class="p-2 header-title-container">
        <span class="mb-0 mx-2">Portfolios - Mobile App Development</span>
    </div>
    <button type="button" class="btn m-2" style="width: 10%; background-color: #fa6f10;"><a href="{{ url('admin/portfolio-mobile/create') }}" class="text-decoration-none text-white">Add Portfolio</a></button>
</div>

<div class="p-3">
    <div class="card-body">
        <table id="myTable" class="table table-striped" style="width:100%">
            <thead>
                <tr>
                    <th>Thumbnail</th>
                    <th>Category</th>
                    <th>Mobile App Name</th>
                    <th>Description</th>
                    <th>Mobile App Type</th>
                    <th>Action</th>
                </tr>
            </thead>

            <tbody>
                @foreach ($portfolios as $items)
                <tr>
                    <td class="w-25"><img src="{{ asset('uploads/portfolios/' . $items->thumbnail) }}" height="80" alt=""></td>
                    <td>{{ $items->category }}</td>
                    <td>{{ $items->mobile_name }}</td>
                    <td>{{ Str::limit(html_entity_decode(strip_tags($items->description)), 80, '...') }}</td>
                    <td>{{ $items->type }}</td>
                    <td>
                        <button class="btn btn-success btn-block mb-1" type="button" data-bs-toggle="modal" data-bs-target="#editModal{{ $items->id }}">View</button>

                        <a href="{{ url('admin/portfolio-mobile/' . $items->id) }}/edit">
                            <button class="btn btn-primary btn-block mb-2 ">Edit</button>
                        </a>

                        <a href="{{ url('admin/portfolio-mobile/' . $items->id) }}/archive">
                            <button class="btn btn-warning btn-block mb-2 ">Archive</button>
                        </a>

                        <form method="POST" action="{{ url('admin/portfolio-mobile/' . $items->id) }}">@csrf
                            @method('DELETE')
                            <button class="btn btn-danger btn-block mb-2 ">Delete</button>
                        </form>
                    </td>
                </tr>

                <!-- VIEW MODAL -->
                <div class="modal fade" tabindex="-1" id="editModal{{ $items->id }}">
                    <div class="modal-dialog modal-dialog-centered">
                        <div class="modal-content">
                            <div class="modal-header view-modal">
                                <h5 class="modal-title">{{ $items->mobile_name }}</h5>
                                <button type="button" type="submit" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                            </div>
                            <div class="modal-body view-modal">
                                <h6 class="modal-title"><b>Category:</b> {{ $items->category }}</h6>
                                <h6 class="modal-title"><b>Mobile App Type:</b> {{ $items->type }}</h6>
                                <h6 class="modal-title"><b>Font-Family:</b> {{ $items->font_family }}</h6>
                                <h6 class="modal-title"><b>Deployed Date:</b> {{ $items->deployed_date }}</h6>
                                <h6 class="modal-title"><b>Google Play Link:</b> {{ $items->link_1 }}</h6>
                                <h6 class="modal-title"><b>App Store Link:</b> {{ $items->link_2 }}</h6>

                                <br>

                                <label class="fw-bold" for="">Color Pallete:</label>
                                <div class="row">
                                    <div class="col-3">
                                        <div class="border rounded p-3" style="background-color: {{ $items->color_1 }};"></div>
                                    </div>
                                    <div class="col-3">
                                        <div class="border rounded p-3" style="background-color: {{ $items->color_2 }};"></div>
                                    </div>
                                    <div class="col-3">
                                        <div class="border rounded p-3" style="background-color: {{ $items->color_3 }};"></div>
                                    </div>
                                    <div class="col-3">
                                        <div class="border rounded p-3" style="background-color: {{ $items->color_4 }};"></div>
                                    </div>
                                </div>

                                <br>

                                <label class="fw-bold" for="">Description:</label>
                                <p>{{ Str::limit(html_entity_decode(strip_tags($items->description)), 80, '...') }}</p>

                                <label class="fw-bold" for="">Key Delivery:</label>
                                <p>{{ Str::limit(html_entity_decode(strip_tags($items->key_delivery)), 80, '...') }}</p>

                                <label class="fw-bold" for="">Project Concept:</label>
                                <p>{{ Str::limit(html_entity_decode(strip_tags($items->concept)), 80, '...') }}</p>

                                <br>

                                <div class="d-flex">
                                    <div>
                                        <label class="fw-bold" for="">Logo:</label>
                                        <img src="{{ asset('uploads/portfolios/' . $items->logo) }}" height="80" alt="">
                                    </div>

                                    <div>
                                        <label class="fw-bold" for="">Image 1:</label>
                                        <img src="{{ asset('uploads/portfolios/' . $items->image_1) }}" height="80" alt="">
                                    </div>

                                    <div>
                                        <label class="fw-bold" for="">Image 2:</label>
                                        <img src="{{ asset('uploads/portfolios/' . $items->image_2) }}" height="80" alt="">
                                    </div>
                                </div>

                            </div>

                        </div>
                    </div>
                </div>

                @endforeach
            </tbody>
        </table>
    </div>
</div>

<style>
    select {
        color: #fa6f10;
        font-weight: bold;
    }

    option {
        font-weight: bold;
    }

    input {
        color: #fa6f10;
        font-weight: bold;
    }

    .paginate_button {
        color: #fa6f10 !important;
        font-weight: bold !important;
    }
</style>
@endsection