@extends('admin.layouts.main')

@section('title', 'Edit Produk')
@section('navProduk', 'active')

@section('content')

<div class="container py-4">

    <!-- HEADER -->
    <div class="card border-0 shadow-sm mb-4 product-header">
        <div class="card-body d-flex justify-content-between align-items-center">

            <div>
                <h3 class="fw-bold mb-1">
                    Edit Produk
                </h3>

                <small class="text-muted">
                    Perbarui informasi produk CircleScent
                </small>
            </div>

            <div class="header-icon">
                <i class="bi bi-pencil-square"></i>
            </div>

        </div>
    </div>

    <div class="row justify-content-center">
        <div class="col-xl-9 col-lg-10">

            <div class="product-card">
                <form action="/dashboard-produk/{{ $produk->id }}"
                    method="POST"
                    enctype="multipart/form-data">

                  @csrf
                  @method('PUT')

                  <div class="row g-5">

                    {{-- ==========================
                        KOLOM KIRI
                    =========================== --}}
                    <div class="col-lg-6">

                        {{-- NAMA PRODUK --}}
                        <div class="mb-4">
                            <label class="form-label">
                                Nama Produk
                            </label>

                            <input
                                type="text"
                                name="nama_produk"
                                value="{{ old('nama_produk', $produk->nama_produk) }}"
                                class="form-control @error('nama_produk') is-invalid @enderror"
                                placeholder="Masukkan nama parfum">

                            @error('nama_produk')
                                <div class="invalid-feedback">
                                    {{ $message }}
                                </div>
                            @enderror
                        </div>


                        {{-- KATEGORI --}}
                        <div class="mb-4">

                            <label class="form-label">
                                Kategori
                            </label>

                            <select
                                name="kategori_id"
                                class="form-select @error('kategori_id') is-invalid @enderror">

                                <option value="">
                                    -- Pilih Kategori --
                                </option>

                                @foreach($kategoris as $kategori)

                                    <option
                                        value="{{ $kategori->id }}"
                                        {{ old('kategori_id', $produk->kategori_id) == $kategori->id ? 'selected' : '' }}
                                    >
                                        {{ $kategori->namakategori }}
                                    </option>

                                @endforeach

                            </select>

                            @error('kategori_id')
                                <div class="invalid-feedback">
                                    {{ $message }}
                                </div>
                            @enderror

                        </div>


                        {{-- GENDER --}}
                        <div class="mb-4">
                            <label class="form-label">
                                Gender
                            </label>

                            <select
                                name="gender"
                                class="form-select @error('gender') is-invalid @enderror">

                                <option value="">
                                    -- Pilih Gender --
                                </option>

                                <option value="Male"
                                    {{ old('gender', $produk->gender) == 'Male' ? 'selected' : '' }}>
                                    Male
                                </option>

                                <option value="Female"
                                    {{ old('gender', $produk->gender) == 'Female' ? 'selected' : '' }}>
                                    Female
                                </option>

                                <option value="Unisex"
                                    {{ old('gender', $produk->gender) == 'Unisex' ? 'selected' : '' }}>
                                    Unisex
                                </option>

                            </select>

                            @error('gender')
                                <div class="invalid-feedback">
                                    {{ $message }}
                                </div>
                            @enderror
                        </div>


                        {{-- GAMBAR LAMA --}}
                        <div class="mb-4">

                            <label class="form-label mb-3">
                                Gambar Produk Saat Ini
                            </label>

                            <div class="row g-3">

                                @forelse($produk->gambarProduk as $gambar)

                                    <div class="col-6 col-md-4">

                                        <div class="image-card">

                                            <img
                                                src="{{ asset('storage/'.$gambar->gambar) }}"
                                                class="product-image">

                                            <button
                                                type="button"
                                                class="delete-btn"
                                                onclick="hapusGambar({{ $gambar->id }},this)">

                                                <i class="bi bi-x-lg"></i>

                                            </button>

                                        </div>

                                    </div>

                                @empty

                                    <div class="col-12">

                                        <div class="alert alert-dark mb-0">
                                            Belum ada gambar produk.
                                        </div>

                                    </div>

                                @endforelse

                            </div>

                        </div>


                        {{-- UPLOAD --}}
                        <div class="mb-2">

                            <label class="form-label">
                                Tambah Gambar Baru
                            </label>

                            <input
                                type="file"
                                id="gambar"
                                name="gambar[]"
                                multiple
                                class="form-control @error('gambar.*') is-invalid @enderror">

                            <small class="upload-info">
                                Bisa pilih lebih dari 1 gambar.
                            </small>

                            @error('gambar.*')
                                <div class="invalid-feedback d-block">
                                    {{ $message }}
                                </div>
                            @enderror

                            <div
                                id="preview-container"
                                class="row g-3 mt-2">
                            </div>

                        </div>

                    </div>

                      {{-- ==========================
                          KOLOM KANAN
                      =========================== --}}
                      <div class="col-lg-6 d-flex flex-column">

                          <div class="mb-4">

                              <label class="form-label">
                                  Usage
                              </label>

                              <select
                                  name="usage"
                                  class="form-select @error('usage') is-invalid @enderror">

                                  <option value="">-- Pilih Usage --</option>

                                  <option value="Indoor"
                                      {{ old('usage',$produk->usage)=='Indoor'?'selected':'' }}>
                                      Indoor
                                  </option>

                                  <option value="Outdoor"
                                      {{ old('usage',$produk->usage)=='Outdoor'?'selected':'' }}>
                                      Outdoor
                                  </option>

                                  <option value="Inoutdoor"
                                      {{ old('usage',$produk->usage)=='Inoutdoor'?'selected':'' }}>
                                      Indoor & Outdoor
                                  </option>

                              </select>

                          </div>

                          <div class="flex-grow-1">

                              <label class="form-label">
                                  Deskripsi
                              </label>

                              <textarea
                                  rows="10"
                                  name="deskripsi"
                                  class="form-control @error('deskripsi') is-invalid @enderror"
                                  placeholder="Deskripsi parfum">{{ old('deskripsi',$produk->deskripsi) }}</textarea>

                              @error('deskripsi')
                                  <div class="invalid-feedback">
                                      {{ $message }}
                                  </div>
                              @enderror

                          </div>

                      </div>

                  </div>

                  {{-- BUTTON --}}
                  <div class="form-action mt-5">

                      <a href="/dashboard-produk"
                          class="btn btn-cancel">

                          <i class="bi bi-arrow-left me-2"></i>
                          Kembali

                      </a>

                      <button
                          type="submit"
                          class="btn btn-save">

                          <i class="bi bi-check-circle me-2"></i>
                          Update Produk

                      </button>

                  </div>

              </form>

            </div>

        </div>
    </div>

</div>

<style>
    .product-header{
        position:relative;
        overflow:hidden;
        border:none;
        border-radius:34px;
        background:#ffffff;
        border:1px solid #E9DDC8;
        box-shadow:0 12px 35px rgba(0,0,0,.06);
    }
    .product-header::before{
        content:'';
        position:absolute;
        top:-120px;
        right:-120px;
        width:260px;
        height:260px;
        border-radius:50%;
        background:radial-gradient(rgba(200,154,75,.12),transparent 70%);
    }
    .product-header .card-body{
        padding:34px;
    }
    .product-header h3{
        color:#2B2B2B;
        font-size:38px;
        font-weight:700;
    }
    .product-header small{
        color:#7A6C57;
    }
    .header-icon{
        width:72px;
        height:72px;
        border-radius:22px;
        display:flex;
        align-items:center;
        justify-content:center;
        background:#F8F5EF;
        border:1px solid #E9DDC8;
    }
    .header-icon i{
        color:#C89A4B;
        font-size:34px;
    }
    .product-card{
        background:#FFFFFF;
        border:1px solid #E9DDC8;
        border-radius:30px;
        padding:35px;
        box-shadow:0 10px 30px rgba(0,0,0,.05);
    }
    .form-label{
        color:#5F4E39;
        font-weight:600;
        margin-bottom:8px;
    }
    .form-control,
    .form-select{
        height:56px;
        background:#fff !important;
        border:1px solid #E4D6BE !important;
        color:#333 !important;
        border-radius:16px !important;
        padding:0 18px !important;
        transition:.3s;
    }
    textarea.form-control{
        min-height:180px;
        padding-top:16px !important;
        resize:none;
    }
    .form-control::placeholder{
        color:#A69682;
    }
    .form-control:focus,
    .form-select:focus{
        border-color:#C89A4B !important;
        box-shadow:
            0 0 0 4px rgba(200,154,75,.12)!important;
    }
    .form-select option{
        color:#333;
        background:#fff;
    }
    .image-card{
        position:relative;
        background:#fff;
        border:1px solid #E9DDC8;
        border-radius:22px;
        overflow:hidden;
        box-shadow:0 8px 20px rgba(0,0,0,.05);
    }
    .product-image{
        width:100%;
        height:180px;
        object-fit:cover;
    }
    .delete-btn{
        position:absolute;
        top:12px;
        right:12px;
    }
    .delete-btn button,
    .remove-image{
        width:38px;
        height:38px;
        border:none;
        border-radius:50%;
        background:#FBE9E9;
        color:#D9534F;
        transition:.3s;
    }
    .delete-btn button:hover,
    .remove-image:hover{
        background:#D9534F;
        color:#fff;
        transform:scale(1.05);
    }
    .preview-wrapper{
        display:flex;
        gap:20px;
        align-items:center;
    }
    .preview-card{
        background:#fff;
        border:1px solid #E9DDC8;
        border-radius:20px;
        padding:14px;
        box-shadow:0 6px 15px rgba(0,0,0,.04);
    }
    .preview-image{
        width:120px;
        height:120px;
        overflow:hidden;
        border-radius:16px;
        border:2px solid #E9DDC8;
    }
    .preview-image img{
        width:100%;
        height:100%;
        object-fit:cover;
    }
    .file-name{
        display:block;
        margin-top:10px;
        color:#777;
        font-size:13px;
        word-break:break-word;
    }
    .upload-info{
        color:#8B7A67;
        margin-top:8px;
        font-size:13px;
    }
    .btn-save{
        background:linear-gradient(135deg,#C89A4B,#D8B56A);
        color:#fff!important;
        border:none!important;
        border-radius:16px;
        height:54px;
        padding:0 30px;
        font-weight:700;
        transition:.3s;
        box-shadow:0 8px 20px rgba(200,154,75,.20);
    }
    .btn-save:hover{
        transform:translateY(-2px);
        background:linear-gradient(135deg,#B88437,#C89A4B);
    }
    .btn-cancel{
        background:#6C757D;
        color:#fff!important;
        border:none!important;
        border-radius:16px;
        height:54px;
        padding:0 30px;
        transition:.3s;
    }
    .btn-cancel:hover{
        background:#5C636A;
        transform:translateY(-2px);
    }.invalid-feedback{
        color:#D9534F;
    }
    @media(max-width:768px){
        .product-header .card-body{
            padding:24px;
        }
        .product-header h3{
            font-size:28px;
        }
        .header-icon{
            width:58px;
            height:58px;
        }
        .product-card{
            padding:22px;
        }
        .preview-wrapper{
            flex-direction:column;
            align-items:flex-start;
        }
        .d-flex.justify-content-end{
            flex-direction:column;
            gap:12px;
        }
        .btn-save,
        .btn-cancel{

            width:100%;
        }

    }
    .form-divider{
        margin:35px 0;
        border-color:#E9DDC8;
        opacity:1;
    }
    .form-action{
        margin-top:40px;
        padding-top:30px;
        border-top:1px solid #ECE2CF;
        display:flex;
        justify-content:flex-end;
        align-items:center;
        gap:15px;
    }
    .form-action .btn{
        height:56px;
        min-width:190px;
        border-radius:18px;
        display:flex;
        align-items:center;
        justify-content:center;
        gap:10px;
        font-weight:600;
    }
    .btn-save{
        background:linear-gradient(135deg,#C89A4B,#D8B56A)!important;
        color:#fff!important;
        border:none;
    }
    .btn-save:hover{
        background:linear-gradient(135deg,#B88437,#C89A4B)!important;
    }
    .btn-cancel{
        min-width:190px;
        height:56px;
        background:linear-gradient(135deg,#F6E8C8,#E9D4A3)!important;
        color:#6B4C1F!important;
        border:1px solid #D8B56A!important;
        border-radius:18px;
        font-weight:700;
        transition:.3s;
        box-shadow:0 8px 20px rgba(200,154,75,.12);
    }
    .btn-cancel:hover{
        background:linear-gradient(135deg,#EFD9A9,#D8B56A)!important;
        color:#4E3612!important;
        transform:translateY(-2px);
        box-shadow:0 12px 26px rgba(200,154,75,.22);
    }
    .btn-cancel i{
        font-size:16px;
    }
    input[type=file]{
        width:100%;
        padding:14px;
        border-radius:16px;
        border:1px solid #E4D6BE;
        background:#fff;
    }
    @media(max-width:768px){
        .form-action{
            flex-direction:column-reverse;
            align-items:stretch;
        }
        .form-action .btn{
            width:100%;
        }
    }
 </style>

<script>
    document.addEventListener('DOMContentLoaded', function () {

        const input =
            document.getElementById('gambar');

        const previewContainer =
            document.getElementById(
                'preview-container'
            );

        let selectedFiles = [];

        // saat pilih gambar
        input.addEventListener(
            'change',
            function(e){

            const newFiles =
                Array.from(
                    e.target.files
                );

            // gabungkan gambar lama + baru
            selectedFiles = [
                ...selectedFiles,
                ...newFiles
            ];

            renderPreview();
            updateInputFiles();
        });

        // render preview
        function renderPreview(){

            previewContainer.innerHTML = '';

            selectedFiles.forEach(
                (file, index) => {

                if(
                    !file.type.startsWith(
                        'image/'
                    )
                ) return;

                const reader =
                    new FileReader();

                reader.onload =
                function(e){

                    const div =
                        document.createElement(
                            'div'
                        );

                    div.className =
                        'col-md-4 col-6 mb-3';

                    div.innerHTML = `
                        <div class="preview-card position-relative">

                            <img
                                src="${e.target.result}"
                                class="preview-image">

                            <button
                                type="button"
                                class="remove-image"
                                data-index="${index}">

                                ×

                            </button>

                            <small class="file-name">
                                ${file.name}
                            </small>

                        </div>
                    `;

                    previewContainer
                        .appendChild(div);
                }

                reader.readAsDataURL(
                    file
                );
            });
        }

        // update file input
        function updateInputFiles(){

            const dataTransfer =
                new DataTransfer();

            selectedFiles.forEach(
                file =>
                dataTransfer.items
                .add(file)
            );

            input.files =
                dataTransfer.files;
        }

        // hapus preview gambar
        previewContainer
        .addEventListener(
            'click',
            function(e){

            if(
                e.target.classList
                .contains(
                    'remove-image'
                )
            ){

                const index =
                    parseInt(
                        e.target.dataset
                        .index
                    );

                selectedFiles.splice(
                    index,
                    1
                );

                renderPreview();
                updateInputFiles();
            }
        });
    });
</script>
<script>
    function hapusGambar(id, button)
    {
        if (!confirm('Hapus gambar ini?'))
            return;

        fetch(`/produk-gambar/${id}`, {
            method: 'DELETE',
            headers: {
                'X-CSRF-TOKEN':
                    '{{ csrf_token() }}',
                'Accept':
                    'application/json'
            }
        })
        .then(response => {

            if(response.ok){

                // hapus card gambar langsung
                button
                    .closest('.col-md-4')
                    .remove();
            }
        })
        .catch(error => {
            console.log(error);
        });
    }
    </script>
@endsection