@extends('layout.master')

@section('title', 'Tetapan Aplikasi Mudah Alih')

@section('content')
<div class="page-header">
    <h5 class="page-title">Tetapan Aplikasi Mudah Alih</h5>
    <nav>
        <ol class="breadcrumb">
            <li class="breadcrumb-item"><a href="/">Laman Utama</a></li>
            <li class="breadcrumb-item">Pengurusan Web</li>
            <li class="breadcrumb-item active">Tetapan Aplikasi Mudah Alih</li>
        </ol>
    </nav>
</div>

<section class="section">
    <div class="row">
        <div class="col-lg-12">
            <div class="card">
                <form action="javascript:void(0)" enctype="multipart/form-data" class="form-horizontal" method="POST" id="form">
                    @csrf
                    <div class="card-body">                        
                        <div class="row g-4">
                            <div class="col-12">
                                <div class="mb-3">
                                    <label class="form-label fw-bold">Tajuk Utama</label>
                                    <input type="text" autocomplete="off" class="form-control" name="tajuk" placeholder="Contoh: Aplikasi Mudah Alih eGP" value="{{ $cms['aplikasi-heading'] ?? '' }}">
                                </div>
                                <div class="mb-3">
                                    <label class="form-label fw-bold">Butiran Utama</label>
                                    <textarea name="butiran" id="butiran" class="form-control" rows="2" placeholder="Penerangan ringkas tentang aplikasi...">{{ $cms['aplikasi-subheading'] ?? '' }}</textarea>
                                </div>
                            </div>
                            
                            <div class="col-lg-6">
                                <div class="card h-100 border shadow-none">
                                    <div class="card-header bg-light d-flex align-items-center">
                                        <i class="bi bi-apple me-2 fs-5 text-primary"></i>
                                        <span class="fw-bold">Tetapan iOS (Apple)</span>
                                    </div>
                                    <div class="card-body pt-3">
                                        <div class="mb-3">
                                            <label class="form-label">Butiran iOS</label>
                                            <textarea autocomplete="off" class="form-control" name="butiran_ios" placeholder="Contoh: Muat turun aplikasi SPDGP untuk iOS" rows="3">{{ $cms['aplikasi-ios-description'] ?? '' }}</textarea>
                                        </div>
                                        <div class="mb-3">
                                            <label class="form-label">URL iOS</label>
                                            <input type="text" autocomplete="off" class="form-control" name="url_ios" placeholder="https://apps.apple.com/..." value="{{ $cms['aplikasi-ios-url'] ?? '' }}">
                                        </div>
                                        <div class="mb-3">
                                            <label class="form-label">Gambar Preview iOS</label>
                                            @if(isset($cms['aplikasi-ios-image']))
                                                <div class="mb-2">
                                                    <img src="{{ asset('storage/' . $cms['aplikasi-ios-image']) }}" alt="iOS Preview" style="height: 100px; border-radius: 5px;">
                                                </div>
                                            @endif
                                            <input type="file" name="gambar_ios" id="gambar_ios" class="form-control">
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="col-lg-6">
                                <div class="card h-100 border shadow-none">
                                    <div class="card-header bg-light d-flex align-items-center">
                                        <i class="bi bi-android2 me-2 fs-5 text-success"></i>
                                        <span class="fw-bold">Tetapan Android</span>
                                    </div>
                                    <div class="card-body pt-3">
                                        <div class="mb-3">
                                            <label class="form-label">Butiran Android</label>
                                            <textarea autocomplete="off" class="form-control" name="butiran_android" placeholder="Contoh: Muat turun aplikasi JPSM untuk Android" rows="3">{{ $cms['aplikasi-android-description'] ?? '' }}</textarea>
                                        </div>
                                        <div class="mb-3">
                                            <label class="form-label">URL Android</label>
                                            <input type="text" autocomplete="off" class="form-control" name="url_android" placeholder="https://play.google.com/..." value="{{ $cms['aplikasi-android-url'] ?? '' }}">
                                        </div>
                                        <div class="mb-3">
                                            <label class="form-label">Gambar Preview Android</label>
                                            @if(isset($cms['aplikasi-android-image']))
                                                <div class="mb-2">
                                                    <img src="{{ asset('storage/' . $cms['aplikasi-android-image']) }}" alt="Android Preview" style="height: 100px; border-radius: 5px;">
                                                </div>
                                            @endif
                                            <input type="file" name="gambar_android" id="gambar_android" class="form-control">
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="card-footer text-center">
                        <button class="btn btn-primary" type="submit">Simpan</button>
                        <a href="{{ route('mobile_apps') }}" class="btn btn-outline-danger">Batal</a>
                    </div>
                </form>
            </div>
        </div>
    </div>
</section>
@endsection

@section('js')
<script type="text/javascript">
    $("#form").submit(function(e) {
        e.preventDefault();
        var formData = new FormData(this);
        $.ajax({
            type:'POST',
            url: "{{ route('pengurusan_web.aplikasi_store') }}",
            data: formData,
            cache:false,
            contentType: false,
            processData: false,
            beforeSend: function() {
                Swal.fire({
                    title: 'Sila Tunggu',
                    text: 'Sedang menyimpan tetapan...',
                    allowOutsideClick: false,
                    didOpen: () => {
                        Swal.showLoading()
                    }
                });
            },
            success: (data) => {
                Swal.fire({
                    icon: 'success',
                    text: 'Tetapan Aplikasi Mudah Alih Berjaya Disimpan',
                    showConfirmButton: true,
                }).then(() => {
                    window.location.href = "{{ route('mobile_apps') }}";
                });
            },
            error: function(data){
                console.log(data);
                Swal.fire({
                    icon: 'error',
                    text: 'Gagal menyimpan tetapan. Sila cuba lagi.',
                });
            }
        });
    });
</script>
@endsection