@extends('layouts.app')

@section('title', config('app.name') . ' - Edit Merchant')

@php
    $photoUrl = !empty($merchant->merchant_photo)
        ? asset($merchant->merchant_photo)
        : asset('assets/images/no_image.png');
@endphp

@section('content')
    <div class="container">
        <div class="row">
            <div class="col-12">

                <div class="card border-0 shadow-sm rounded-3">

                    <div class="card-header bg-white py-3 border-bottom border-light d-flex align-items-center">
                        <div class="bg-primary-subtle text-primary p-2 rounded-2 me-3 d-flex align-items-center justify-content-center"
                            style="width: 40px; height: 40px;">
                            <i class="fa-solid fa-shop fs-5"></i>
                        </div>
                        <div>
                            <h5 class="card-title mb-0 fw-semibold">Edit Merchant</h5>
                            <small class="text-muted">Silahkan isi formulir di bawah untuk mengedit data merchant.</small>
                        </div>
                    </div>

                    <form id="frmSimpan" action="#" method="POST" autocomplete="off">
                        @csrf
                        <input type="hidden" id="merchant_id" name="merchant_id"
                            value="{{ Crypt::encryptString($merchant->merchant_id) }}">

                        <div class="card-body p-4 p-md-5">

                            <div class="row justify-content-center mb-4">
                                <div class="col-auto text-center">
                                    <div class="position-relative d-inline-block shadow-sm rounded-circle p-1 bg-light">
                                        <img src="{{ $photoUrl }}"
                                            class="rounded-circle img-thumbnail"
                                            style="width: 160px; height: 160px; object-fit: cover; cursor: pointer;"
                                            alt="Foto Merchant"
                                            onclick="document.getElementById('photo-input').click()">

                                        <button type="button"
                                            class="btn btn-sm btn-primary position-absolute rounded-circle d-flex align-items-center justify-content-center shadow"
                                            style="bottom: 8px; right: 8px; width: 36px; height: 36px;"
                                            onclick="document.getElementById('photo-input').click()">
                                            <i class="fa fa-camera small"></i>
                                        </button>

                                        <input type="file" id="photo-input" name="photo" accept="image/jpeg,image/png,image/jpg"
                                            class="d-none">
                                    </div>
                                    <div class="small text-muted mt-2">Klik foto untuk mengubah</div>
                                </div>
                            </div>

                            <hr class="text-muted opacity-25 my-4" />

                            <div class="row g-4">

                                <div class="col-md-6">
                                    <label for="name" class="form-label fw-medium">Nama Merchant <span
                                            class="text-danger">*</span></label>
                                    <input type="text" class="form-control-lg form-control" id="name" name="name"
                                        value="{{ old('name', $merchant->name) }}" placeholder="Masukkan nama merchant"
                                        maxlength="255" required>
                                </div>

                                <div class="col-md-6">
                                    <label for="merchant_sub_category" class="form-label fw-medium">Kategori <span
                                            class="text-danger">*</span></label>
                                    <select class="form-select select2_single" style="width: 100%;"
                                        id="merchant_sub_category" name="merchant_sub_category" required>
                                        @foreach (collect($kategori)->groupBy('category') as $categoryName => $items)
                                            <optgroup label="{{ $categoryName }}">
                                                @foreach ($items as $item)
                                                    <option value="{{ $item->sub_category }}"
                                                        @selected(old('merchant_sub_category', $merchant->merchant_sub_category) === $item->sub_category)>
                                                        {{ $item->sub_category }}
                                                    </option>
                                                @endforeach
                                            </optgroup>
                                        @endforeach
                                    </select>
                                </div>

                                <div class="col-12">
                                    <label for="description" class="form-label fw-medium">Deskripsi <span
                                            class="text-danger">*</span></label>
                                    <textarea class="form-control" id="description" name="description" rows="4"
                                        placeholder="Deskripsi singkat merchant"
                                        required>{{ old('description', $merchant->description) }}</textarea>
                                </div>

                                <div class="col-md-6">
                                    <label for="email" class="form-label fw-medium">Alamat Email <span
                                            class="text-danger">*</span></label>
                                    <input type="email" class="form-control-lg form-control" id="email" name="email"
                                        value="{{ old('email', $merchant->email) }}" placeholder="contoh@email.com"
                                        maxlength="255" required>
                                </div>

                                <div class="col-md-6">
                                    <label for="phone" class="form-label fw-medium">Nomor Telepon</label>
                                    <div class="input-group">
                                        <span class="input-group-text bg-light text-muted">+62</span>
                                        <input type="tel" class="form-control-lg form-control" id="phone" name="phone"
                                            value="{{ old('phone', $merchant->phone) }}" placeholder="81234567xxx"
                                            maxlength="20">
                                    </div>
                                </div>

                                <div class="col-md-6">
                                    <label for="country" class="form-label fw-medium">Negara</label>
                                    <select class="form-select form-select-lg select2_single" id="country" name="country">
                                        <option value="">— Pilih negara —</option>
                                        @foreach ($country as $item)
                                            <option value="{{ $item->country_name }}"
                                                @selected(old('country', $merchant->country) === $item->country_name)>
                                                {{ $item->country_name }}
                                            </option>
                                        @endforeach
                                    </select>
                                </div>

                                <div class="col-md-6" style="display: none;" id="dalam-negeri">
                                    <label for="cityDalamNegeri" class="form-label fw-medium">Kota / Kabupaten</label>
                                    <select class="form-select form-select-lg select2_single" id="cityDalamNegeri"
                                        name="cityDalamNegeri" style="width: 100%;">
                                        <option value="">— Pilih kota —</option>
                                        @foreach ($city as $item)
                                            <option value="{{ $item->city_name }}"
                                                @selected(old('cityDalamNegeri', $merchant->city) === $item->city_name)>
                                                {{ $item->city_type == 1 ? 'Kota' : 'Kabupaten' }} {{ $item->city_name }}
                                            </option>
                                        @endforeach
                                    </select>
                                </div>

                                <div class="col-md-6" id="luar-negeri">
                                    <label for="cityLuarNegeri" class="form-label fw-medium">Kota</label>
                                    <input type="text" class="form-control-lg form-control" id="cityLuarNegeri"
                                        name="cityLuarNegeri" value="{{ old('cityLuarNegeri', $merchant->city) }}"
                                        placeholder="Masukkan nama kota" maxlength="30">
                                </div>

                                <div class="col-md-6">
                                    <label for="latitude" class="form-label fw-medium">Latitude</label>
                                    <input type="number" step="any" class="form-control-lg form-control" id="latitude"
                                        name="latitude" value="{{ old('latitude', $merchant->latitude) }}"
                                        placeholder="-6.200000">
                                </div>

                                <div class="col-md-6">
                                    <label for="longitude" class="form-label fw-medium">Longitude</label>
                                    <input type="number" step="any" class="form-control-lg form-control" id="longitude"
                                        name="longitude" value="{{ old('longitude', $merchant->longitude) }}"
                                        placeholder="106.816666">
                                </div>

                            </div>
                        </div>

                        <div class="card-footer px-4 py-3 border-top border-light d-flex gap-2">
                            <a href="{{ route('merchant.index') }}" class="btn btn-secondary px-4 fw-medium">
                                <i class="fa-solid fa-chevron-left me-2"></i>Kembali
                            </a>
                            <button type="submit" class="btn btn-primary px-4 fw-medium">
                                <i class="fa-solid fa-floppy-disk me-2"></i>Simpan
                            </button>
                        </div>

                    </form>

                </div>

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

    <script>
        $(document).ready(function () {
            function toggleCityFields() {
                if ($('#country').val() === 'Indonesia') {
                    $('#dalam-negeri').show();
                    $('#luar-negeri').hide();
                } else {
                    $('#dalam-negeri').hide();
                    $('#luar-negeri').show();
                }
            }

            toggleCityFields();
            $('#country').change(toggleCityFields);
        });

        $('#frmSimpan').submit(function (e) {
            e.preventDefault();
            let formData = new FormData(this);

            $.ajax({
                url: '{{ route('merchant.update') }}',
                type: 'POST',
                data: formData,
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content'),
                    'Authorization': 'Bearer ' + @json($apiToken)
                },
                processData: false,
                contentType: false,
                beforeSend: function () {
                    $.blockUI({
                        message: '<i class="fa fa-spinner fa-spin"></i> Please wait...',
                        css: {
                            border: 'none',
                            padding: '15px',
                            backgroundColor: '#000',
                            color: '#fff'
                        }
                    });
                },
                success: function (response) {
                    if (response.content?.status === 'success') {
                        Swal.fire({
                            title: 'Sukses',
                            text: response.content.message,
                            icon: 'success'
                        });
                    }
                },
                complete: function () {
                    $.unblockUI();
                },
                error: function (xhr) {
                    const response = xhr.responseJSON || {};
                    const message = response.content?.message || 'Terjadi kesalahan saat menyimpan data';

                    Swal.fire({
                        title: 'Error',
                        text: message,
                        icon: 'error'
                    });
                },
            });
        });

        $('#photo-input').change(function () {
            if (!this.files || !this.files[0]) {
                return;
            }

            let formData = new FormData();
            formData.append('photo', this.files[0]);
            formData.append('merchant_id', $('#merchant_id').val());

            $.ajax({
                url: '{{ route('merchant.update.photo') }}',
                type: 'POST',
                data: formData,
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content'),
                    'Authorization': 'Bearer ' + @json($apiToken)
                },
                processData: false,
                contentType: false,
                beforeSend: function () {
                    $.blockUI({
                        message: '<i class="fa fa-spinner fa-spin"></i> Please wait...',
                        css: {
                            border: 'none',
                            padding: '15px',
                            backgroundColor: '#000',
                            color: '#fff'
                        }
                    });
                },
                success: function (response) {
                    if (response.content?.status === 'success') {
                        Swal.fire({
                            title: 'Sukses',
                            text: response.content.message,
                            icon: 'success'
                        });

                        if (response.content.data?.photo) {
                            $('img[alt="Foto Merchant"]').attr('src', '/' + response.content.data.photo);
                        }
                    } else {
                        Swal.fire({
                            title: 'Error',
                            text: response.content?.message || 'Terjadi kesalahan saat mengupdate foto',
                            icon: 'error'
                        });
                    }
                },
                complete: function () {
                    $.unblockUI();
                },
                error: function (xhr) {
                    const response = xhr.responseJSON || {};
                    const message = response.content?.message || response.message || 'Terjadi kesalahan saat mengupdate foto';

                    Swal.fire({
                        title: 'Error',
                        text: message,
                        icon: 'error'
                    });
                },
            });
        });
    </script>
@endsection