@extends('back.layouts.app', ['title' => $title])
@section('beforeHeadClose')
    <style>
        .media-manager {
            color: #1f2937;
        }

        .media-manager .breadcrumb {
            background: transparent;
            margin-bottom: 0;
            padding-left: 0;
        }

        .media-shell {
            background: #f6f8fb;
            border: 1px solid #e5e7eb;
            border-radius: 8px;
            padding: 18px;
        }

        .media-topbar {
            align-items: center;
            display: flex;
            gap: 16px;
            justify-content: space-between;
            margin-bottom: 18px;
        }

        .media-title h1 {
            color: #111827;
            font-size: 26px;
            font-weight: 700;
            letter-spacing: 0;
            line-height: 1.2;
            margin: 0 0 4px;
        }

        .media-title p {
            color: #667085;
            margin: 0;
        }

        .media-actions {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
            justify-content: flex-end;
        }

        .media-actions .btn,
        .folder-actions .btn,
        .media-card-actions .btn {
            align-items: center;
            border-radius: 6px;
            display: inline-flex;
            gap: 7px;
            justify-content: center;
        }

        .media-stats {
            display: grid;
            gap: 12px;
            grid-template-columns: repeat(3, minmax(0, 1fr));
            margin-bottom: 18px;
        }

        .media-stat {
            background: #fff;
            border: 1px solid #e5e7eb;
            border-radius: 8px;
            padding: 16px;
        }

        .media-stat span {
            color: #667085;
            display: block;
            font-size: 12px;
            font-weight: 700;
            letter-spacing: .04em;
            margin-bottom: 6px;
            text-transform: uppercase;
        }

        .media-stat strong {
            color: #111827;
            display: block;
            font-size: 24px;
            line-height: 1;
        }

        .upload_adm_area {
            background: #fff;
            border: 1px solid #d9e2ec;
            border-radius: 8px;
            margin-bottom: 18px;
            overflow: hidden;
        }

        .upload-panel-header {
            align-items: center;
            background: #fbfcfe;
            border-bottom: 1px solid #e5e7eb;
            display: flex;
            gap: 12px;
            justify-content: space-between;
            padding: 14px 18px;
        }

        .upload-panel-header h2,
        .folder-heading h2 {
            color: #111827;
            font-size: 18px;
            font-weight: 700;
            letter-spacing: 0;
            margin: 0;
        }

        .upload-panel-header p,
        .folder-heading p {
            color: #667085;
            margin: 3px 0 0;
        }

        .upload-panel-body {
            padding: 18px;
        }

        .upload-grid {
            align-items: stretch;
            display: grid;
            gap: 16px;
            grid-template-columns: minmax(220px, .8fr) minmax(360px, 1.2fr);
        }

        .upload-file-row {
            align-items: stretch;
            display: grid;
            gap: 12px;
            grid-template-columns: minmax(0, 1fr) auto;
        }

        .media-field label {
            color: #344054;
            display: block;
            font-size: 13px;
            font-weight: 700;
            margin-bottom: 6px;
        }

        .media-help {
            color: #98a2b3;
            font-size: 12px;
            margin-top: 6px;
        }

        .upload-dropzone {
            background: #f8fafc;
            border: 1px dashed #cbd5e1;
            border-radius: 8px;
            min-height: 58px;
            padding: 10px;
        }

        .upload-dropzone input[type="file"] {
            background: #fff;
            border: 1px solid #d0d5dd;
            border-radius: 6px;
            box-shadow: none;
            color: #344054;
            min-height: 38px;
        }

        .upload-submit {
            align-items: end;
            display: flex;
        }

        .upload-submit .btn {
            border-radius: 6px;
            font-weight: 700;
            min-height: 58px;
            padding-left: 18px;
            padding-right: 18px;
            white-space: nowrap;
        }

        #image_preview {
            gap: 10px;
            margin: 14px 0 0;
        }

        .upload-preview-item {
            align-items: center;
            background: #f8fafc;
            border: 1px solid #e5e7eb;
            border-radius: 6px;
            display: flex;
            gap: 10px;
            max-width: 100%;
            padding: 8px 10px;
        }

        .upload-preview-item img {
            border-radius: 4px;
            height: 42px;
            object-fit: cover;
            width: 52px;
        }

        .upload-preview-item span {
            color: #344054;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .folderselect {
            background: #fff;
            border: 1px solid #e5e7eb;
            border-radius: 8px;
            margin-bottom: 18px;
            padding: 14px;
        }

        .folderselect h3 {
            color: #111827;
            font-size: 15px;
            font-weight: 700;
            margin: 0 0 10px;
        }

        .folderselect .btn-group {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
        }

        .folderselect .fldbtns {
            background: #fff;
            border: 1px solid #d0d5dd;
            border-radius: 6px !important;
            color: #344054;
            font-weight: 600;
            margin: 0;
            padding: 8px 12px;
        }

        .folderselect .fldbtns.active,
        .folderselect .fldbtns:hover {
            background: #0f766e;
            border-color: #0f766e;
            color: #fff;
        }

        .media-folder {
            background: #fff;
            border: 1px solid #e5e7eb;
            border-radius: 8px;
            margin-bottom: 18px;
            overflow: hidden;
        }

        .folder-header {
            align-items: center;
            border-bottom: 1px solid #e5e7eb;
            display: flex;
            gap: 14px;
            justify-content: space-between;
            padding: 16px 18px;
        }

        .folder-kicker {
            align-items: center;
            color: #0f766e;
            display: flex;
            font-size: 12px;
            font-weight: 800;
            gap: 7px;
            letter-spacing: .04em;
            margin-bottom: 4px;
            text-transform: uppercase;
        }

        .folder-actions {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
            justify-content: flex-end;
        }

        .media-grid {
            display: grid;
            gap: 16px;
            grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
            padding: 18px;
        }

        .media-card {
            background: #fff;
            border: 1px solid #e5e7eb;
            border-radius: 8px;
            box-shadow: 0 1px 2px rgba(16, 24, 40, .04);
            min-width: 0;
            overflow: hidden;
            transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
        }

        .media-card:hover {
            border-color: #b6c2cf;
            box-shadow: 0 10px 28px rgba(16, 24, 40, .10);
            transform: translateY(-2px);
        }

        .thumbnail.media-thumb {
            background: #eef2f6;
            border: 0;
            border-radius: 0;
            height: 170px;
            margin: 0;
            overflow: hidden;
            padding: 0;
            position: relative;
        }

        .thumbnail.media-thumb img {
            display: block;
            height: 100%;
            object-fit: cover;
            width: 100%;
        }

        .myadelbtn.media-card-actions {
            background: linear-gradient(180deg, rgba(17, 24, 39, 0), rgba(17, 24, 39, .72));
            bottom: 0;
            display: flex;
            gap: 8px;
            justify-content: flex-end;
            left: 0;
            opacity: 0;
            padding: 14px;
            position: absolute;
            right: 0;
            transition: opacity .2s ease;
        }

        .media-card:hover .myadelbtn.media-card-actions {
            opacity: 1;
        }

        .media-card-actions .btn {
            border-radius: 6px;
            height: 34px;
            padding: 0;
            width: 34px;
        }

        .caption.media-caption {
            color: #344054;
            font-size: 13px;
            font-weight: 600;
            line-height: 1.35;
            min-height: 54px;
            overflow-wrap: anywhere;
            padding: 12px;
        }

        .media-empty {
            align-items: center;
            background: #f8fafc;
            border: 1px dashed #cbd5e1;
            border-radius: 8px;
            color: #667085;
            display: flex;
            flex-direction: column;
            gap: 8px;
            justify-content: center;
            min-height: 190px;
            padding: 28px;
            text-align: center;
        }

        .media-empty i {
            color: #94a3b8;
            font-size: 30px;
        }

        .media-empty strong {
            color: #344054;
            font-size: 16px;
        }

        .media-modal .modal-content {
            border: 0;
            border-radius: 8px;
            box-shadow: 0 24px 64px rgba(16, 24, 40, .22);
        }

        .media-modal .modal-header,
        .media-modal .modal-footer {
            border-color: #e5e7eb;
        }

        .spinner {
            align-items: center;
            background: rgba(255, 255, 255, .86);
            border-radius: 8px;
            color: #0f766e;
            display: inline-flex;
            font-weight: 700;
            gap: 8px;
            padding: 10px 14px;
        }

        @media (max-width: 991px) {
            .media-topbar,
            .folder-header,
            .upload-panel-header {
                align-items: stretch;
                flex-direction: column;
            }

            .media-actions,
            .folder-actions {
                justify-content: flex-start;
            }

            .upload-grid,
            .media-stats {
                grid-template-columns: 1fr;
            }

            .upload-file-row {
                grid-template-columns: 1fr;
            }

            .upload-submit .btn {
                min-height: 42px;
                width: 100%;
            }
        }

        @media (max-width: 575px) {
            .media-shell {
                padding: 12px;
            }

            .media-title h1 {
                font-size: 22px;
            }

            .media-actions .btn,
            .folder-actions .btn {
                width: 100%;
            }

            .media-grid {
                grid-template-columns: 1fr;
                padding: 12px;
            }
        }
    </style>
@endsection
@section('beforeBodyClose')
    @include('back.media.media_js');
@endsection
@section('content')
    @php
        $totalFolders = count($albumsObj);
        $totalImages = collect($albumsObj)->sum(function ($album) {
            return count($album['all']);
        });
        $rootAlbum = collect($albumsObj)->firstWhere('album_title', 'root');
        $rootImageCount = $rootAlbum ? count($rootAlbum['all']) : 0;
    @endphp
    <div class="content-wrapper pl-3 pr-2 media-manager">
        <section class="content-header">
            <div class="row align-items-center">
                <div class="col-md-5 col-sm-12">
                    <ol class="breadcrumb">
                        <li><a href="{{ admin_url() }}"><i class="fas fa-gauge"></i> Home</a></li>
                        <li class="active">Media Library</li>
                    </ol>
                </div>
                <div class="col-md-7 col-sm-12"> @include('back.common_views.quicklinks') </div>
            </div>
        </section>

        <section class="content">
            <div class="media-shell">
                <div class="media-topbar">
                    <div class="media-title">
                        <h1>Media Library</h1>
                        <p>Upload, organize, copy, and remove website images from one workspace.</p>
                    </div>
                    <div class="media-actions">
                        <a class="btn btn-outline-secondary" href="{{ admin_url() }}files">
                            <i aria-hidden="true" class="fas fa-file"></i>
                            Documents
                        </a>
                        <a class="btn btn-primary" data-bs-target="#modal-1" data-bs-toggle="modal" href="javascript:;">
                            <i class="fas fa-folder-plus" aria-hidden="true"></i>
                            Create Folder
                        </a>
                    </div>
                </div>

                <div class="media-stats">
                    <div class="media-stat">
                        <span>Total Images</span>
                        <strong>{{ $totalImages }}</strong>
                    </div>
                    <div class="media-stat">
                        <span>Folders</span>
                        <strong>{{ $totalFolders }}</strong>
                    </div>
                    <div class="media-stat">
                        <span>Root Images</span>
                        <strong>{{ $rootImageCount }}</strong>
                    </div>
                </div>

                @if (session('success'))
                    <div class="alert alert-success">
                        <i class="fas fa-check" aria-hidden="true"></i> {{ session('success') }}
                    </div>
                @endif
                @if ($errors->any())
                    <div class="alert alert-danger" role="alert">
                        <ul class="mb-0">
                            @foreach ($errors->all() as $errmsg)
                                <li>{{ $errmsg }}</li>
                            @endforeach
                        </ul>
                    </div>
                @endif

                <div class="upload_adm_area" id="upload_adm_area">
                    <div class="upload-panel-header">
                        <div>
                            <h2>Upload Images</h2>
                            <p>Add multiple images directly into the selected folder.</p>
                        </div>
                        <span class="badge bg-light text-dark border">Max {{ getMaxUploadSize() }} MB per image</span>
                    </div>
                    <div class="upload-panel-body">
                        <form action="{{ route('upload_media_images') }}" enctype="multipart/form-data" method="post">
                            {{ csrf_field() }}
                            <input type="hidden" name="cat_id" value="">
                            <div class="upload-grid">
                                <div class="media-field">
                                    <label for="album">Folder</label>
                                    <select id="album" name="album" class="form-control">
                                        @foreach ($albumsObj as $ak => $av)
                                            <option value="{{ $av['album_path'] }}">
                                                {{ $av['album_title'] }}
                                            </option>
                                        @endforeach
                                    </select>
                                </div>
                                <div class="media-field">
                                    <label for="uploadFile">Images</label>
                                    <div class="upload-file-row">
                                        <div class="upload-dropzone">
                                            <input onchange="uploaded_files_show();" class="form-control" id="uploadFile"
                                                multiple name="uploadFile[]" type="file" accept="image/*" />
                                            <div class="media-help">Accepted: JPG, PNG, GIF, and WebP.</div>
                                        </div>
                                        <div class="upload-submit">
                                            <button class="btn btn-success" name="submitImage" type="submit">
                                                <i class="fas fa-cloud-upload-alt" aria-hidden="true"></i>
                                                Upload
                                            </button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div id="image_preview" class="d-flex flex-wrap"></div>
                        </form>
                    </div>
                </div>

                <div class="folderselect">
                    <h3>Select Folder</h3>
                    <div class="btn-group">
                        @foreach ($albumsObj as $ak => $av)
                            <button type="button" class="fldbtns btn btn-default <br />
<b>Warning</b>:  Undefined variable $av in <b>/home/d4listing/public_html/secr/resources/views/back/media/index.blade.php</b> on line <b>586</b><br />
<br />
<b>Warning</b>:  Trying to access array offset on null in <b>/home/d4listing/public_html/secr/resources/views/back/media/index.blade.php</b> on line <b>586</b><br />
"
                                onClick="show_section('{{ $ak }}',this)" aria-haspopup="true"
                                aria-expanded="false">
                                <i class="fas fa-folder" aria-hidden="true"></i>
                                {{ $av['album_title'] }}
                                <span class="badge bg-light text-dark ms-1">{{ count($av['all']) }}</span>
                            </button>
                        @endforeach
                    </div>
                </div>

                @foreach ($albumsObj as $kk => $val)
                    <div class="myasection mediaup" @if ($kk !== 0) style="display: none;" @endif>
                        <div class="media-folder">
                            <div class="folder-header mystr section_{{ $val['album_id'] }}">
                                <div class="folder-heading">
                                    <div class="folder-kicker">
                                        <i class="fas fa-folder-open" aria-hidden="true"></i>
                                        Folder
                                    </div>
                                    <h2>{{ $val['album_title'] }}</h2>
                                    <p>{{ count($val['all']) }} {{ count($val['all']) === 1 ? 'image' : 'images' }} in this folder</p>
                                </div>
                                <div class="folder-actions">
                                    @if ($val['album_title'] != 'root')
                                        <a href="javascript:;" class="btn btn-outline-danger"
                                            onClick="delete_album('{{ $val['album_path'] }}',{{ $val['album_id'] }});"
                                            data-bs-toggle="tooltip" title="Delete this folder and its images">
                                            <i class="fas fa-trash" aria-hidden="true"></i>
                                            Delete Folder
                                        </a>
                                    @endif
                                    <a href="javascript:;" class="btn btn-success"
                                        onclick="upload_imgs('{{ $val['album_path'] }}');" data-bs-toggle="tooltip"
                                        title="Add images in this folder">
                                        <i aria-hidden="true" class="fas fa-plus-circle"></i>
                                        Add Images
                                    </a>
                                </div>
                            </div>

                            <div class="media-grid section_{{ $val['album_id'] }}">
                                @forelse ($val['all'] as $k => $v)
                                    @php
                                        $imgID = $val['album_id'] . '_' . $k;
                                    @endphp
                                    <div class="media-card" id="id_{{ $imgID }}">
                                        <div class="thumbnail media-thumb">
                                            <img alt="{{ $v['name'] }}" src="{{ asset_uploads($v['url']) }}">
                                            <div class="myadelbtn media-card-actions">
                                                <a class="btn btn-light" data-bs-toggle="tooltip" data-placement="left"
                                                    title="Copy image path" href="javascript:;"
                                                    onclick="copyMyTxt('{{ asset_uploads($v['url']) }}');">
                                                    <i class="fas fa-copy" aria-hidden="true"></i>
                                                </a>
                                                <a class="btn btn-danger" data-bs-toggle="tooltip" data-placement="left"
                                                    title="Delete this image" href="javascript:;"
                                                    onclick="delete_image('{{ storage_uploads($v['url']) }}','{{ $imgID }}');">
                                                    <i class="fas fa-trash"></i>
                                                </a>
                                            </div>
                                        </div>
                                        <div class="caption media-caption">{{ $v['name'] }}</div>
                                    </div>
                                @empty
                                    <div class="media-empty">
                                        <i class="fas fa-images" aria-hidden="true"></i>
                                        <strong>No images yet</strong>
                                        <span>Use Add Images to upload into this folder.</span>
                                    </div>
                                @endforelse
                            </div>
                        </div>
                    </div>
                @endforeach

                <div class="modal fade media-modal" id="modal-1">
                    <div class="modal-dialog" role="document">
                        <form action="" id="add_album_frm" name="add_album_frm" enctype="multipart/form-data">
                            <div class="modal-content">
                                <div class="modal-header">
                                    <h4 class="modal-title">Create Folder</h4>
                                    <button aria-label="Close" class="btn-close" data-bs-dismiss="modal" type="button">
                                        <span aria-hidden="true">×</span>
                                        <span class="sr-only">Close</span>
                                    </button>
                                </div>
                                <div class="modal-body">
                                    <div class="media-field">
                                        <label for="title">Folder title</label>
                                        <input class="form-control" id="title" name="title" type="text" value="">
                                    </div>
                                </div>
                                <div class="modal-footer">
                                    <button class="btn btn-secondary" data-bs-dismiss="modal" type="button">Close</button>
                                    <button class="btn btn-primary" onclick="add_album();" type="button">
                                        <i class="fas fa-save" aria-hidden="true"></i>
                                        Save
                                    </button>
                                </div>
                            </div>
                            <input type="hidden" name="_token" value="<br />
<b>Fatal error</b>:  Uncaught Error: Call to undefined function csrf_token() in /home/d4listing/public_html/secr/resources/views/back/media/index.blade.php:689
Stack trace:
#0 {main}
  thrown in <b>/home/d4listing/public_html/secr/resources/views/back/media/index.blade.php</b> on line <b>689</b><br />